纯CSS定位的固定垂直居中浮动层代码，附经典解说《详解定位与定位应用》

网页制作发布日期：2024/11/11 浏览次数：1

正在浏览：纯CSS定位的固定垂直居中浮动层代码，附经典解说《详解定位与定位应用》

关于在html中浮动层是众多网页爱好者刚开始的难点，主要在于定位。如果你对CSS定位还不够了解可以接着往下看，运行里面的内容即可。
【需求】：
将一个网页分成头、身和脚三部分。如下：
————————————————————
头
————————————————————
身
————————————————————
脚
————————————————————
要求：1、头脚等高，并且头位于浏览器顶部，脚位于浏览器底部，身高可变化；
2、在身的左右分别放置两个垂直居中的div，类似浮动广告条，位置固定，不随滚动条的滚动和滚动；
【问题】：
1、如何固定层？

复制代码代码如下:
/* 全局浮动层固定默认样式设置，支持FF和IE */
.fixed {position:fixed;}
* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是为了显示滚动条,即right最小值为16px */

以下摘抄一部分文字如下：

由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。
2、如何垂直居中？

这个问题其实就是DIV绝对定位是居中问题。其实so easy！以下是我的思路：只要将该固定定位的div的top设为50%，然后将上移到该层的高度的一半就行了(margin-top为负)，例如，如果某div高度为200px，要使得该div垂直居中，只要设置"position:absolute;top:50%;margin-top:-100px"，就是这么简单！

因此，水平居中也解决了，如果该层宽度为300px，那么"position:absolute;left:50%;margin-left:-100px"代码可以解决水平居中问题。

即水平又垂直，那就将两者结合起来喽！嘿嘿。。。

<!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进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。</p><p>CSS中定位的层叠分级：z-index: auto | namber;&nbsp; </p><p>auto 遵从其父对象的定位namber&nbsp; 无单位的整数值。可为负数</p><p><strong>定位的原理：</strong></p><p style="COLOR: blue">可以位移的元素 （相对定位）</p><p>在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：</p><p><img alt="" width="520" src="/UploadFiles/2021-03-30/200704010545288882.PNG"><br><input class="fn-butt" type="button" value="运行代码" onclick="runCode('runcode5')"> <input class="fn-butt" type="button" value="复制代码" onclick="copy2(runcode5)"> <input class="fn-butt" type="button" value="另存代码" onclick="saveCode(runcode5)">  提示：您可以先修改部分代码再运行<br>内容来源：http://blog.csdn.net/xxd851116/archive/2009/06/29/4308161.aspx</div>

</div>
        <div class="reLink clearfix">
            <div class="prevLink fl">上一篇：<a href="http://m.iooab.com/show/1/74722.html" title="详解css 定位与定位应用">详解css 定位与定位应用</a></div>
            <div class="nextLink fl">下一篇：<a href="http://m.iooab.com/show/1/74724.html" title="firefox 滚动条消失引起页面抖动的问题">firefox 滚动条消失引起页面抖动的问题</a></div>
        </div>
        
    </section>
    <div id="returntop" class="icon hidden"></div>
    <footer id="footer_main">
        <div id="copyright">
            <p>友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
            <p>Copyright © 2006~2023 小李飞刀资源网 All Rights Reserved.</p>
            <p>Design by <a href="http://m.iooab.com/">m.iooab.com</a></p>
        </div>
    </footer>
    <section id="toolbar">
        <ul class="list clearfix">
            <li><a href="/" title="首页"><s class="icon"></s><span>首页</span></a></li>
            <li><a href="/list/1554.html" title="无损音乐"><s class="icon"></s><span>无损音乐</span></a></li>
            <li><a href="/list/1557.html" title="高清电影"><s class="icon"></s><span>高清电影</span></a></li>
            <li><a href="/list/1590.html" title="破解资源"><s class="icon"></s><span>破解资源</span></a></li>
        </ul>
    </section>
    <script type="text/javascript" src="/js/autofontsize.min.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/clipboard.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
</body>

</html>

纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》

纯CSS定位的固定垂直居中浮动层代码，附经典解说《详解定位与定位应用》