简析CSS中position属性值的区别

最新推荐文章于 2024-03-12 11:12:40 发布

枫林_panda

最新推荐文章于 2024-03-12 11:12:40 发布

阅读量606

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/sinat_39417731/article/details/78212250

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

position规定元素的定位类型，可以设置的值有：static,relative,absolute,fixed,inherit。

我们写5个方块，来显示各个值的区别。
代码：

<style type="text/css">
    *{margin:0;padding: 0;color: #fff}
    .test1{
        position: relative;
        width: 200px;
        height: 200px;
        background: #112232;
        color: #fff;
        top: 0;
        left: 0;
    }
    .test2{
        /*position: static;*/
        width: 100px;
        height: 100px;
        background: #778898;
    }
    .test3{
        position:absolute;
        width: 200px;
        height: 200px;
        background: #556676;
        top:0px;
        left:200px;
    }
    .test4{
        position:absolute;
        width: 200px;
        height: 200px;
        background:#223343;
        top:0px;
        left:400px;
    }
    .test5{
        position:fixed;
        width: 50px;
        height: 50px;
        background:#998878;
        top:40px;
        left:40px;
    }
</style>

<body>
    <div class='test1'>test1
        <div class='test2'>test2
            <div class='test3'>test3</div>
            <div class='test4'>test4</div>  
            <div class='test5'>test5</div>
        </div>
    </div>
</body>

效果如图：

我们可以由此知道：

test3和test4方块的position:absolute是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。是会脱离文档流的。所以上图的两个position：absolute的方块都是相对于test1方块来设置top和left值来定位的。
- 那么如果test4为test3的子元素，定位是怎么样的呢？
  代码：

    <div class='test1'>test1
        <div class='test2'>test2
            <div class='test3'>test3
                <div class='test4'>test4</div>
            </div>  
            <div class='test5'>test5</div>
        </div>
    </div>

    如图：

这时，test4是相对test3定位的，不像之前作为相邻元素相互依靠了。即如果它的父级元素和爷爷级元素都是非position:static 属性，则它会选择距离最近的父元素。

position:relative则是相对定位的元素，相对于其正常位置进行定位。它是不会脱离文档流的。我们设置top：0和left:0，所以test1方块位置没有变化，在原来的位置。
position:fixed则是生成绝对定位的元素，相对于浏览器窗口进行定位。会脱离文档流。当拉动浏览器的滚动条时，别的元素在发生位移变化的时候，test5方块依旧是相对浏览器进行定位的。
如图：