CSS3之内容布局——定位(position)

声明：本文源自《精通CSS：高级web标准解决方案》(第3版)

一、定位：static relative absolute  fixed

1. 概念：

      static(静态定位)：块级元素垂直堆叠

      relative (相对定位)：真正的用途：可以为 “后代元素” 创造 “定位上下文” ；相对其 “原始位置” 控制该元素的 “偏移量”，同时不影响周围其他的元素。

      absolute(绝对定位)：相对其最近的 “定位上下文” || “非static定位的‘祖先元素’” || “html元素”，进行定位 。会脱离文档流

      fixed(固定定位)：其“定位上下文”被自动设置为浏览器视口， 脱离文档流。

2. 应用场景：

    “绝对定位”-->非常适合  “创建弹出层”，“提示”，“对话框”，这类覆盖于其他内容之上的组件。

    示例：关于 提示框的 实现：

    

基于伪类after 利用border的特性实现三角形

场景：利用偏移实现自动大小

relative + absolute 实现， 前者生成 “定位上下文”, 后者加上 top bottom left right 这些偏移量的控制，设置其中3个 自动控制剩余的1个。

比如：如下的设置，指定右、下、左边距，上空间通过自动计算

.photo-header {
      position: relative;
 }

.photo-header-plate {
      position: absolute;
      right: 4em;
      bottom: 4em;
      left: 4em;
 }
<header class="photo-header">
    <div class="photo-header-plate"></div>
</header>

3. 定位与z-index: 堆叠内容的陷阱

静态定位(static)以外的元素会根据他们在代码树中的深度依次叠放，这个次序可以通过z-index来调整。z-index只要设为正值，就会出现在未设置z-index元素的上方。

“堆叠上下文”，是由特定属性和值创建的。有一个“根堆叠上下文”，所有的z-index不是auto的定位元素都会出现在这个上下文中排序。随着其他上下文的建立，就会出现堆叠层级。

举例：

1. 任何设定了position: absolute及值不是auto的z-index属性的元素，都会创建一个自己后代元素的堆叠上下文

2. 在一个堆叠上下文的内部，无论z-index的值多大或多小，都不会影响“其他堆叠上下文”。

3. opacity的值小于1的元素可以触发新的堆叠上下文，因为该元素需要 “独立” 渲染（包括它的所有后代元素）

4. transform和filter属性，也会触发创建新的“堆叠上下文”