首页 > 其他 > 详细

关于position定位中的几个注意点

时间:2016-12-01 21:38:05      阅读:106      评论:0      收藏:0      [点我收藏+]

在CSS中我们会用到position来进行布局,常用的就是三种relative,absolute,fixed

relative就是我们常说的相对定位,相对于在正常文档流中的位置进行定位,它不会脱离正常的文档流,所以在进行定位以后,之前的位置也会保持占有状态。

     <div class="test">
            这是一行文字,这是一行文字
            <div style="width: 200px;height: 50px;background: yellow;position: relative;top: 50px;"></div>
        </div>

技术分享

我们可以看到文字和黄色div之间有很大的空隙,这个空隙就是因为还占据着原来的位置导致。由于没有脱离文档流,在定位为relative的元素中设置width:100%时,实际上就是父元素的宽度。

absolute:相对于离他最近且position的值不为static的元素进行定位(或者根元素),脱离了文档流。当我们设置width:100%时,这个100%也是根据离他最近且position的值不为static的元素(或者根元素)的宽度进行计算,而不是父元素。

        <div class="wrap">
            <div class="container">
                <div class="main">
                </div>
            </div>
        </div>
       .wrap{
                width: 200px;
                height: 100px;
                position: relative;
            }
            .container{
                width: 300px;
                height: 50px;
                background: red;
            }
            .main{
                position: absolute;
                width: 100%;
                height: 100%;
                background: yellow;
            }

技术分享

 

 我们可以看到并不是根据父元素的宽度来进行计算。当然overflow也是相对于离他最近且position的值不为static的元素(或者根元素)的宽度进行计算。

fixed:是相对于视口进行定位。所以我们设置width:100%时相对于浏览器的可见宽度。就相当于设置height:100vh。也是脱离文档流的。所以overflow也将是相对于可见窗口而言。

 

关于position定位中的几个注意点

原文:http://www.cnblogs.com/djlxs/p/6123294.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!