关于CSS的position属性

2019年9月7日 124次阅读 来源: Zhang_zm

未完待续......最近在读《CSS secrets》, 看完再来补充……

position

CSS的position属性用于指定元素的定位类型。默认值: static

4个可能的值:

static

  • 元素按常规文档流（从左到右 从上到下）定位；

  • 静态定位的元素不能使用 top, right, bottom 和 left 属性进行定位。

absolute

  • 元素脱离文档流；

  • 元素相对于它包含的元素进行定位，相对于所有其他元素，绝对定位的元素是独立定位的。

  • 它的定位要么相对于最近的祖先元素，要么相对于文档本身。

fixed

  • 元素脱离文档流，相对于浏览器窗口进行定位；

  • 与其他所有元素独立；

  • 大多数浏览器支持，IE6 除外（大概也没有公司要求必须支持 IE6 了=。=）。

relative

  • 元素按照常规文档流布局，它的定位相对于他文档流中的位置进行调整；

  • 系统保留元素在正常文档流中的空间，不会因为要填充空间而将其个边合拢，也不会将元素从新的位置“推开”。

一些实例

position 的值为 static 以外的值的元素，可通过设置元素 top 和 left 属性指定其左边缘到容器（通常是文档本身）左边缘的距离和其上边缘到容器上边缘的距离。

例如，定位一个距离文档左、上边缘分别是 100px 的 div 元素，可以指定如下样式：

<style>
    div{
        position:absolute;
        top:100px;
        left:100px;
    }
</style>

如果一个元素使用绝对定位，它的 top 和 left 属性是它相对于 position 属性设置为出 static 以外的祖先元素的上、左边缘的距离。如果它没有设置过除 static 以外的祖先，则使用文档边缘进行定位。

<!-- html -->
<body>
    <div id="div1" class="lev1">
        <div id="div1-1" class="lev2">div1-1</div>
    </div>
    
    <div id="div2" class="lev1">
        <div id="div2-1" class="lev2">div2-1</div>
    </div>
    <div id="div3" class="lev1"></div>
</body>
<!-- css -->
<style>
    body {
      background-color: #eee;
      color: #333;
    }
    
    .lev1{
        width:200px;
        height:200px;
        background-color:yellowgreen;
        border:1px solid #eee;
        margin-top:20px;
        margin-left:20px;
    }
    #div1{
        
    }
    #div2{
        position:relative;
    }
    #div3{
        background-color:purple;
    }
    .lev2{
        position:absolute;
        width:50px;
        height:50px;
        left:0;
        top:10px;
        background-color:red;
    }
</style>

效果如下：

《关于CSS的position属性》

任何绝对定位的子元素都相对于容器进行定位。

使用 top 和 left 定位元素的左上角位置是常见的定位方法，也可以使用 right 和 bottom 对指定元素相对于容器的右、下边缘进行定位。

除了指定元素 width 来确定元素宽度，还可用过指定 left 和 right 的方式（同样，也可通过指定 top 和 bottom 来指定元素的高度）。 同时指定时，width 优先级高于 right/left, height 优先级高于 bottom/top; left 优先级高于 right, top 优先级高于bottom.

没必要给每一个动态元素指定尺寸。 某些元素（如图片）具有固定尺寸。对于包含文本或其他流式内容的动态元素通常指定宽度就足够了，让布局决定它的高度。

    原文作者：Zhang_zm
    原文地址: https://segmentfault.com/a/1190000005065182
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞