CSS文档流

最新推荐文章于 2024-03-11 16:15:57 发布

兜兜88

最新推荐文章于 2024-03-11 16:15:57 发布

阅读量255

点赞数

分类专栏： CSS

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文档流即在元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，在每行中按从左到右的顺序排放元素。

脱离文档流式指元素打乱了这个排列，或者是从排版中拿走。

包括：浮动和定位。

position

absolute 脱离文档流。绝对定位，脱离文档流，相对于static以外的第一个父元素定位。通过left、right、top、bottom进行定位。

fixed 脱离文档流。生成绝对定位的元素，相对于浏览器定位。通过left、right、top、bottom进行。

relative 相对定位，相对于其正常位置定位。

static 默认值，无定位，设置left、right、top、bottom无效。

inherit 继承父级元素定位。

z-index 元素层级

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <!--<script type="text/javascript" src='jquery-1.9.1.js'></script>-->
      <style>
    *{
      margin: 0;
      padding: 0;
      text-align: right;
      color: #FFF;
    }
    #container{
      position: absolute;
      left: 20px;
      margin-top: 10px;
      width: 600px;
      height: 600px;
      background-color: green;
    }
    #bigest{
      position: static;
      left: 20px;
      margin-top: 20px;
      width: 500px;
      height: 500px;
      background-color: #ab2;
    }
    #biger{
      position: static;
      left: 20px;
      margin-top: 30px;
      width: 400px;
      height: 400px;
      background-color: #00f;
    }
    #big{
      position: relative;
      left: 20px;
      margin-top: 40px;
      width: 300px;
      height: 300px;
      background-color: #000;
    }
    #normal{
      position: static;
      margin-left: 20px;
      margin-top: 50px;
      width: 200px;
      height: 200px;
      background-color: #aaa;
    }
    #middle{
      position: absolute;
      left: 20px;
      margin-top: 60px;
      width: 100px;
      height: 100px;
      background-color: #aaa;
    }
    #small{
      position: fixed;
      left: 20px;
      margin-top: 70px;
      height: 50px;
      width: 50px;
      background-color: #f00;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="bigest">
        <div id="biger">
          <div id="big">
            <div id="normal">
              <div id="middle">
                <div id="small">small
                </div>middle
              </div>normal
            </div>big
          </div>biger
        </div>bigest
      </div>container
    </div>
</body>
</html>

1. static 设置left等无效，对margin，padding有效；

2. 父子节点都没有脱离文档的定位（static，relative）的外边距（margin）会合并，以最大值为准；块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。

行内元素的左右外边距不会合并。

浮动元素的外边距不会合并。可指定负外边距值。

3. 脱离文档流的元素都是块级元素。

4. 脱离文档流的定位absolute的元素不要在其内部包含有脱离文档流的元素存在，对于脱离文档流的元素需要自己计算高度，而脱离文档流的元素a中还包含脱离a的元素b时，定位难。

5. 对使用absolute脱离文档流的元素如果做到让absolute元素后面的元素自适应布局？使用margin定位后面的元素。

6. relative没有脱离文档流，其原有位置会保留，脱离文档流的元素相当于自身生成了一个新的文档流，父容器对其没有布局上的影响（最多是定位的影响）。但是relative却不是，父容器对其布局影响照旧。

float

left/right/none

脱离文档流的元素没有实际高度。对于浮动元素。位置属性（left，right，top，bottom）没有用。

位置优先级

（fixed == absolute） > float > relative > static

堆叠优先级

定位元素z-index>=0时为（fixed==absolute==relative）> static，z-index < 0时（fixed == absoulte ==relative）<static。兄弟元素一个设置了relative，一个设置了static，当relative元素z-index >=0时，无论static元素设置多少都在relative下面。如果relative设置z-index<0，则static取什么值relative都会在static下面。

定位元素z-index>=0时（fixed ==absolute==relative）>float，z-index<0时（fixed ==absolute==relative）<float，理解为兄弟元素一个设置了relative，一个设置了float:left，当relative元素z-index>=0时，无论float元素设置多少都在relative下面。如果relative设置z-index<0,则无论float的z-index设置多少relative都会在float下面。

float > static 始终成立。因为z-index只有在定位元素上才起作用，定位元素包括fixed，absolute，relative。

fixed ==absolute==relative，比较堆叠顺序直接比较z-index大小即可。

http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html

兜兜88

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS文档流

http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html文档流即在元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，在每行中按从左到右的顺序排放元素。脱离文档流式指元素打乱了这个排列，或者是从排版中拿走。包括：浮动和定位。positionabsolute 脱离文档流。
复制链接

扫一扫

专栏目录