随笔- 1395 文章- 2 评论- 1664 阅读- 637万

CSS 学习-2. position(定位方式)

前言

position 属性规定元素的定位方式，任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position 属性

position 属性规定元素的定位类型，默认值是static

默认值：	static
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.position="absolute"

其它可以设置的值

值：	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位可以被认为是相对定位和固定定位的混合

static 默认值

static 指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
此时 top, right, bottom, left 和 z-index 属性无效。
设置其他属性，会激活（top, right, bottom, left ）属性。

relative 相对定位

relative 在没有偏移前就是static，relative相当于一个可以偏移的static。static 只具有占坑的特性，不具有可偏移的特性。
如果一个元素，没有postion属性，就是默认static，如果你加上postion=absolute，只要不进行偏移，那么布局是跟static一样的。
所以，你可以通过 relative 替代static，需要 postion 就定义 relative，不进行偏移就是跟默认 static 一样。

特性	static	relative
占位	占坑	占坑
可偏移	不可以	可以

示例

    <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            color: white;
        }
        #two {
            position: relative;
            top: 20px;
            left: 20px;
            background: blue;
        }
    </style>

<body>
    <div class="warp">
        <div class="box" id="one">1</div>
        <div class="box" id="two">2</div>
        <div class="box" id="three">3</div>
        <div class="box" id="four">4</div>
    </div>
</body>

absolute 绝对定位

absolute 一般叫绝对定位，是相对父级节点的绝对定位（根据父级节点的左上角来定位）。
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

absolute的特性：
1、不占坑：脱离文档流，不占位，像是悬浮在文档上的涂层，所以定位灵活多变。
2、可偏移：通过left、right、bottom、top进行偏移。
3、定位原点：以父节点左上角为原点。
4、生效前提：父节点必须设置 position 属性，relative 或者 absoluate 都行。一旦没有父节点，或者父节点没有设置position属性，则以浏览器左上角为原点。

特性	relative	absoluate
占位	占坑	不占坑
可偏移	可以	可以
偏移起点	原位置左上角	最近父级别左上角
前提条件	无	父节点必须设置 position属性

示例

    <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            color: white;
        }
        #three {
            position: absolute;
            top: 30px;
            left: 30px;
            background: blue;
        }
    </style>
<body>
    <div class="warp">
        <div class="box" id="one"><h1>1</h1></div>
        <div class="box" id="two"><h1>2</h1></div>
        <div class="box" id="three"><h1>3</h1></div>
        <div class="box" id="four"><h1>4</h1></div>
    </div>
</body>

fixed 固定定位

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

fixed 和 absolute 都是不占坑，可偏移，唯一的区别就是定位原点不同：absolute是以父节点左上角来定位，而fixed永远以浏览器的左上角为准。
如果父级节点就是浏览器，那么他们就会完全重合。

特性	absoluate	fixed
占位	不占坑	不占坑
可偏移	可以	可以
偏移起点	最近父级别左上角	浏览器左上角
前提条件	父节点必须设置position属性	无

示例:left: 0;距离屏幕左边为0， bottom: 0;距离屏幕底部为0，也就是在屏幕底部位置

    <style>
        .box {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
            color: white;
        }
        .box3 {
            width: 100%;
            height: 120px;
            position: fixed;
            left: 0;
            bottom: 0;
            background: blue;
        }
    </style>
<body>
    <div class="warp">
        <div class="box" id="one"><h1>1</h1></div>
        <div class="box" id="two"><h1>2</h1></div>
        <div class="box3" id="three"><h1>固定在屏幕底部</h1></div>
        <div class="box" id="four"><h1>4</h1></div>
    </div>
    <div class="body" style="height: 1200px">
        <h1>hello</h1>
    </div>
</body>

sticky 粘性定位元素

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。
注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#one { position: sticky; top: 10px; }

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
       dl {
          margin: 0;
          padding: 24px 0 0 0;
        }
       dt {
          background: #B8C1C8;
          margin: 0;
          padding: 2px 0 0 12px;
          position: sticky;
          top: 2px;
        }

    </style>
</head>
<body>
    <div>
      <dl>
        <dt>A</dt>
        <dd>Andrew W.K.</dd>
        <dd>Apparat</dd>
        <dd>Arcade Fire</dd>
        <dd>At The Drive-In</dd>
        <dd>Aziz Ansari</dd>
      </dl>
      <dl>
        <dt>C</dt>
        <dd>Chromeo</dd>
        <dd>Common</dd>
        <dd>Converge</dd>
        <dd>Crystal Castles</dd>
        <dd>Cursive</dd>
      </dl>
      <dl>
        <dt>E</dt>
        <dd>Explosions In The Sky</dd>
      </dl>
      <dl>
        <dt>T</dt>
        <dd>Ted Leo & The Pharmacists</dd>
        <dd>T-Pain</dd>
        <dd>Thrice</dd>
        <dd>TV On The Radio</dd>
        <dd>Two Gallants</dd>
      </dl>
    </div>
</body>