纯CSS定位的固定垂直居中浮动层代码，附经典解说：《详解定位与定位应用》资源-CSDN文库

共1个文件

html：1个

3星 · 超过75%的资源需积分: 10 57 浏览量 2009-06-29 15:49:50 上传评论 1 收藏 4KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS定位的固定垂直居中浮动层代码，附经典解说：《详解定位与定位应用》.rar （1个子文件）

fixed-div.html 10KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta http-equiv="Author" content="笑的自然" /> <meta http-equiv="Index" content="http://blog.csdn.net/xxd851116" /> <title>纯CSS定位的固定垂直居中浮动层代码，附经典解说：《详解定位与定位应用》</title> <style type="text/css"> /*<![CDATA[*/ body {margin:0; padding:0; height:100%; overflow:auto;} /* 全局浮动层固定默认样式设置，支持FF和IE */ .fixed {position:fixed;} * html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是为了显示滚动条,即right最小值为16px */ html {overflow:auto !important; overflow:hidden;} #menu1 {width:100%; padding:10px; text-align:center; font-weight:bold; background:#000; color:#FFF; top:0;} #menu2 {width:100%; padding:10px; text-align:center; font-weight:bold; background:#000; color:#FFF; bottom:0;} #menu3 {width:75px; height:150px; padding:10px; background:#333; line-height:20px; color:#FFF; margin-top:-75px; top:50%; left:0;} #menu4 {width:75px; height:150px; padding:10px; background:#333; line-height:20px; color:#FFF; margin-top:-75px; top:50%; right:16px;} /* 注意：right需要去掉滚动条宽度16px */ #menu1 a, #menu2 a , #menu3 a , #menu4 a {color:#FFF;} </style> </head> <body> <div id="menu1" class="fixed"> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Mozilla</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Opera</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Netscape</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Firefox</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">IE6</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Windows</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Style</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">CSS</a> </div> <div id="menu2" class="fixed"> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Mozilla</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Opera</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Netscape</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Firefox</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">IE6</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Windows</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">Style</a> <a href="http://blog.csdn.net/xxd851116" title="Dummy menu item">CSS</a> </div> <div id="menu3" class="fixed"> <a href="http://blog.csdn.net/xxd851116" target="_blank" title="Dummy menu item">^_^这是纯CSS定位的固定垂直居中浮动层广告条哦，<br/>滚动时一点也不闪烁吧？<br/>哈哈！</a> </div> <div id="menu4" class="fixed"> <a href="http://blog.csdn.net/xxd851116" target="_blank" title="Dummy menu item">^_^这是纯CSS定位的固定垂直居中浮动层广告条哦，<br/>滚动时一点也不闪烁吧？<br/>哈哈！</a> </div> <div style="height:2000px;background-color:#eee;padding:50px;line-height:20px;width:720px;margin-left:auto;margin-right:auto;"> <h3>本页面编辑:<a href="http://blog.csdn.net/xxd851116">http://blog.csdn.net/xxd851116</a></h3>  <h2 class="post-title">详解定位与定位应用</h2> <p>定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。</p><ul> <li><strong>引伸阅读</strong> </li> <li><a href="http://andymao.com/andy/post/40.html">解读absolute与relative</a> </li> <li><a href="http://andymao.com/andy/post/67.html">position:relative/absolute无法冲破的等级</a> </li> <li><a href="http://andymao.com/andy/post/69.html">对《无法冲破的等级》一文的补充</a> </li></ul><p><strong>定位的定义：</strong></p><p>在CSS中关于定位的内容是：position:relative | absolute | static | fixed </p><p>static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。<br />relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。<br />absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。<br />fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。</p><p>CSS中定位的层叠分级：z-index: auto | namber;  </p><p>auto 遵从其父对象的定位<br />namber  无单位的整数值。可为负数</p><p><strong>定位的原理：</strong></p><p style="COLOR: blue">可以位移的元素（相对定位）</p><p>在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：</p><br /><p><img alt="" width="520" src="http://www.andymao.com/andy/upload/200704010545288882.PNG" /></p><p>我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid #333; padding:25px; 相对定位的元素，并且位移距上50px，距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值，但是在Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。</p><p>并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的，由些可推，当TRBL为负值时位移的方向是外放的。在图片有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。关于位移方位，可以延伸阅读<a target="new_windows" href="http://www.planabc.net/">怿飞</a>的《<a target="new_windows" href="http://www.planabc.net/article.asp?id=125">由浅入深漫谈margin属性（一）</a>》<br /></p><p style="COLOR: blue">可以在任意一个位置的元素（绝对定位）</p><p>如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位，绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位，这就好比是一个工厂里的工人，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：</p><img alt="" width="520" src="http://www.andymao.com/andy/upload/200704010614004430.png" /><p>上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。<br /></p><p style="COLOR: blue">被关联的绝对定位</p><p>上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素希望能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式

评论收藏

内容反馈

qq_25708071

2015-06-01

虽然能够实现但是兼容性不强复用性不大
Ibanze

2014-04-08

不错，帮我解决问题了只是兼容性有待提高
不老刘

2013-11-22

根本下载不了！点下载等了半天都没反应啊！是csdn的问题？
jacklaoba

2012-04-10

非常实用。找了很多地方，就这个代码帮我解决了问题。一下子就成功，解决了我的问题。非常的开心。可以在CSS层面上面进行垂直定位，而且除了火狐，其他所有的浏览器都是可以兼容的。
TBAG

2014-04-10

讲解的还是很不错。兼容性怎么办？