元素定位position:static,inhert,absolute,relative,fixed

最新推荐文章于 2024-03-09 16:15:33 发布

~往无前

最新推荐文章于 2024-03-09 16:15:33 发布

阅读量1.6k

点赞数

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

原文链接：https://www.cnblogs.com/rhett-web/p/4895492.html

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

position属性定义了一个元素在页面不居中的位置以及对周围元素的影响。该属性共有5个值：

1.position:static
2.position:inherit
3.position:absolute
4.position:relative
5.position:flexd

static
static 为position属性的默认值，static元素会遵循正常的文档流，top,bottom,left,right属性不起作用。

inherit
inherit值如同其他css属性的inherit值，即继承父元素的position值。

absolute
当元素设置position:absolute时，会脱离正常文档流，后面的元素会忽略该元素。如同absolute元素的display属性被设为了none一样。此时，我们可以使用top,bottom,left,right等属性对absolute元素进行绝对定位。

例如：当对absolute元素添加left:10px定位后，这个left究竟是对那个元素而言呢？其实，此时将会往上查找absolue元素的第一个父元素，如果该父元素的position值存在，那么这个left:10px; 就是根据该父元素进行定位的，否则将会继续查找该父元素的父元素，已知追溯到某个父元素具备不为static的position值为止，如果不存在满足条件的父元素，则会根据最外层的window进行定位。

relative
relative元素遵循正常的文档流，所以周围元素不会忽略他的存在，relative元素同样支持top,bottom,left.right.但是当它使用定位属性进行移动时，他们会认为relative元素仍然在原来的位置，并未进行移动。

在这里插入图片描述

<style>
    .num1{
        width: 100px;
        height: 100px;
        /* padding-top:20px ; */
        background-color:red;
        border: 1px solid black;
        position: relative;
        top: 50px;
        left: 50px;

    }
    .num2{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color:black;
       
    }
</style>
<body>
    <div class="num1">1</div>
    <div class="num2">2</div>
</body>

fixed

fixed元素将会脱离正常的文档流，所以它与absolute元素很类似，同样会周围元素忽略，支持top,bottom,left,right属性，但两者仍有很大不同。第二。fixed元素正如名字一样，它是固定在屏幕上的某个位置，他不回应为屏幕的滚动而消失。
在这里插入图片描述

z-index

因为z-index属性只对定位元素有效，即position值为absolute,relative,fixed才有效。而且值越高则显示顺序越优先。

 .num1{
        width: 100px;
        height: 100px;
        /* padding-top:20px ; */
        background-color:red;
        border: 1px solid black;
        position: fixed;
        z-index: 3;

    }
    .num2{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50px;
        background-color:black;
        z-index: 2;
       
    }
    .num3{
        width: 100px;
        height: 100px;
        background-color: green;
        position: relative;
        top: 70px;
        left: 70px;
        z-index: 1;
    }
</style>
<body>
    <div class="num1">1</div>
    <div class="num2">2</div>
    <div class="num3">3</div>
</body>

在这里插入图片描述
当z-index相同时，后加载的元素显示优先。

~往无前

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
元素定位position:static,inhert,absolute,relative,fixed

position属性定义了一个元素在页面不居中的位置以及对周围元素的影响。该属性共有5个值：1.position:static2.position:inherit3.position:absolute4.position:relative5.position:flexdstaticstatic 为position属性的默认值，static元素会遵循正常的文档流，top,bottom,left,right属性不起作用。inheritinherit值如同其他css属性的inherit值，即继承
复制链接

扫一扫