关于CSS的position属性

时间 2019-11-10

标签关于 css position 属性栏目 CSS 繁體版

原文原文链接

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

position

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

4个可能的值:

static

元素按常规文档流（从左到右从上到下）定位；浏览器
静态定位的元素不能使用 top, right, bottom 和 left 属性进行定位。布局

absolute

元素脱离文档流；spa
元素相对于它包含的元素进行定位，相对于全部其余元素，绝对定位的元素是独立定位的。code
它的定位要么相对于最近的祖先元素，要么相对于文档自己。htm

fixed

元素脱离文档流，相对于浏览器窗口进行定位；blog
与其余全部元素独立；图片
大多数浏览器支持，IE6 除外（大概也没有公司要求必须支持 IE6 了=。=）。ip

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>

效果以下：

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

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

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

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

1. 关于CSS的布局：position属性
2. css的position属性
3. CSS position 属性
4. CSS position属性、float属性
5. CSS中Position属性
6. CSS 之 Position 属性
7. CSS 布局的position属性、float属性
8. CSS中的Position属性 overflow 属性
9. CSS中的Position属性
10. jquery的animate关于background-position属性
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• ☆基于Java Instrument的Agent实现
• NewSQL-TiDB相关