recursal/MDN huggingface dataset:
contain-intrinsic-height
========================

CSS 属性 **`contain-intrinsic-length`** 定义了元素受尺寸局限时浏览器用于布局的元素高度。

语法
--


```css
/\* 关键词值 \*/
contain-intrinsic-height: none;

/\* <length> 值 \*/
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;

/\* auto <length> \*/
contain-intrinsic-height: auto 300px;

/\* 全局值 \*/
contain-intrinsic-height: inherit;
contain-intrinsic-height: initial;
contain-intrinsic-height: revert;
contain-intrinsic-height: revert-layer;
contain-intrinsic-height: unset;
```

### 取值

可为元素指定下列值。

`none`

元素无固有高度。

`<length>`

元素具有指定高度（`<length>`）。

`auto <length>`

若存在“正常渲染”的元素高度且元素正在跳过其内容（例如在屏外时），则为此高度的记忆值；否则为指定的 `<length>`。

描述
--

此属性的应用常常伴随如 `contain: size` 和 `content-visibility` 等可触发尺寸局限的要素，且亦可使用简写属性 `contain-intrinsic-size` 设置。

尺寸局限允许用户代理将元素视为具有固定尺寸进行布局。由此避免为确定实际尺寸而重渲子元素，阻止不必要的重排（进而改善用户体验）。尺寸局限默认将元素视为不包含内容，且可按与内容无高度（或宽度）相同的方式折叠布局。`contain-intrinsic-height` 允许作者为布局所用的高度指定合适的值。

`auto <length>` 值允许元素“被正常渲染”（包括其子元素）后存储其高度，再在元素不包含任何内容时使用此高度而非指定高度。由此允许有 `content-visibility: auto` 的屏外元素无需开发者精确估计元素尺寸即可受益于尺寸局限。在子元素渲染时，不使用记忆值（若启用尺寸局限，则将使用 `<length>`）。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `none` |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| 计算值 | as specified, with <length>s values computed |
| Animation type | by computed value type |

形式语法
----
```

contain-intrinsic-height =   
  auto? [ none | <length> ]    
  
```

示例
--

除下列示例外，`contain-intrinsic-size` 页面含有演示修改固有宽度和高度的效果的运行实例。

### 设置固有高度

下列 HTML 代码定义了将受尺寸限制的元素“contained\_element”，此元素包含一个子元素。


```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```


下列 CSS 代码将 `contained_element` 的 `content-visibility` 设置为 `auto`，故若元素被隐藏则将受尺寸限制。此元素受尺寸限制时所用的宽度和高度分别使用 `contain-intrinsic-width` 和 `contain-intrinsic-height` 同时设置。


```css
#contained\_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* content-visibility：提高渲染性能的新 CSS 属性（web.dev）
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`
接续兄弟组合器
=======

**接续兄弟选择器**（`+`）介于两个选择器之间，当第二个元素*紧跟在*第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。


```css
/\* 图片后面紧跟着的段落将被选中 \*/
img + p {
  font-weight: bold;
}
```

语法
--


```css
former\_element + target\_element { style properties }
```

示例
--

### CSS


```css
li:first-of-type + li {
  color: red;
}
```

### HTML


```html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```

### 结果

规范
--

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 后续兄弟组合器
margin-block
============

CSS 简写属性 **`margin-block`** 定义了元素的逻辑块首和块末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

尝试一下
----

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `margin-block-start`
* `margin-block-end`
语法
--


```css
/\* <length> 值 \*/
margin-block: 10px 20px; /\* 绝对长度 \*/
margin-block: 1em 2em; /\* 相对于文本尺寸 \*/
margin-block: 5% 2%; /\* 相对于最近区块容器的宽度 \*/
margin-block: 10px; /\* 同时设置块首和块末值 \*/

/\* 关键词值 \*/
margin-block: auto;

/\* 全局值 \*/
margin-block: inherit;
margin-block: initial;
margin-block: revert;
margin-block: revert-layer;
margin-block: unset;
```


根据 `writing-mode`、`direction` 和 `text-orientation` 所定义的值，此属性对应于 `margin-top` 和 `margin-bottom`，或者 `margin-right` 和 `margin-left` 属性。

`margin-block` 属性可用一个或两个值指定。

* 用**一个**值指定时，**块首和块末**应用同样的外边距。
* 用**两个**值指定时，第一个外边距应用于**块首**，第二个应用于**块末**。
### 取值

`margin-block` 属性的取值与 `margin` 属性相同。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `margin-block-start`: `0`
* `margin-block-end`: `0`
 |
| 适用元素 | same as `margin` |
| 是否是继承属性 | 否 |
| Percentages | depends on layout model |
| 计算值 | as each of the properties of the shorthand:* `margin-block-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-block-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

形式语法
----
```

margin-block =   
  <'margin-top'>{1,2}    
  
```

示例
--

### 设置块首和块末外边距

#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```


#### HTML


```html
<div>
  <p>示例文本</p>
</div>
<div class="verticalExample">
  <p>示例文本</p>
</div>
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-margin-block |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 逻辑属性与逻辑值
* 对应的实体属性：`margin-top`、`margin-right`、`margin-bottom` 和 `margin-left`
* `writing-mode`、`direction`、`text-orientation`
scroll-margin-inline
====================

简写属性 **`scroll-margin-inline`** 设置了元素的行向滚动外边距。

尝试一下
----

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
语法
--


```css
/\* <length> 值 \*/
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

/\* 全局值 \*/
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;
```

### 取值

`<length>`

滚动容器对应边的外边距。

描述
--

`scroll-margin` 值表示定义滚动吸附区域的外边距，此区域用于将此盒吸附至滚动口。滚动吸附区域的确定方法为：取变换后的边框盒，求其矩形包围盒（与滚动容器的坐标空间中的轴对齐），再加上指定的外边距。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `scroll-margin-inline-start`: `0`
* `scroll-margin-inline-end`: `0`
 |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as each of the properties of the shorthand:* `scroll-margin-inline-start`: as specified
* `scroll-margin-inline-end`: as specified
 |
| Animation type | by computed value type |

形式语法
----
```

scroll-margin-inline =   
  <length>{1,2}    
  
```

示例
--

### 简单演示

此示例所实现的内容与上述互动示例非常相似，但此处将解释其实现方法。

此处的目标为创建四个横向滚动区块，其中第二个和第三个吸附至指定位置——靠近但不恰好位于每个区块的右侧。

#### HTML

表示这些区块的 HTML 非常简单：


```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```


#### CSS

一起来过一遍 CSS。外层容器有如下样式：


```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```


与滚动吸附相关的主要部分为 `overflow-x: scroll`——确保内容可滚动且不被隐藏——以及 `scroll-snap-type: x mandatory`——要求必须沿横轴出现滚动吸附，且滚动总将止于吸附点。

子元素有如下样式：


```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```


此处最相关的部分为 `scroll-snap-align: end`——指定右侧的边（即此情形中沿 x 轴的“末侧”）为吸附点。

最后指定滚动外边距的值，为第二个和第三个子元素指定不同的值：


```css
.scroller > div:nth-child(2) {
  scroll-margin-inline: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline: 2rem;
}
```


这意味着当滚动过中间的子元素后，滚动将吸附至第二个 `<div>` 行末边的 `1rem` 外处，及第三个 `<div>` 行末边的 `2rems` 外处。

**备注：** 此处虽然在行向轴（即此情形中的 x 轴）的首侧*和*末侧均设置了 `scroll-margin`，但真正相关的仅有末侧边。此处若仅在此边上设置滚动外边距，例如 `scroll-margin-inline: 0 1rem` 或 `scroll-margin-inline-end: 1rem`，则效果相同。

#### 结果

请自行尝试：

规范
--

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS 滚动吸附
* 用 CSS 滚动吸附明确控制滚动
image-rendering
===============

CSS 属性 **`image-rendering`** 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

当页面作者指定的尺寸不是图像的原始尺寸时，用户代理将缩放图像。缩放也可能由于用户互动（双指缩放）而发生。举个例子，如果有一张尺寸为 `100×100px` 的图片，但作者有意将尺寸设置为 `200×200px`（或`50×50px`），然后，图片便会根据 `image-rendering` 指定的算法，缩小或放大到新尺寸。此属性对于未缩放的图像没有影响。

**备注：** The Canvas API can provide a fallback solution for `crisp-edges` through manual image data manipulation.

语法
--


```css
/\* 专有属性值 \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/\* 全局属性值 \*/
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;
```

### 属性值

`auto`

自 Gecko 1.9（Firefox 3.0）起，Gecko 使用*双线性*（*bilinear*）算法进行重新采样（高质量）。

`smooth` 
实验性

应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。

`high-quality` 
实验性

与 `smooth` 相同，但更倾向于高质量的缩放。如果系统资源受到限制，在考虑降低哪些图像的质量以及降低到什么程度时，`high-quality` 的图像应该优先于任何其他值的图像。

`crisp-edges`

必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。合适的算法包括*最近邻居*（*nearest-neighbor*）算法和其他非平滑缩放算法，比如 *2×SaI* 和 *hqx-\** 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。

`pixelated`

放大图像时，使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 `auto` 相同。


**备注：** 早期草案中出现的 `optimizationQuality` 和 `optimizationSpeed` （来自 SVG 的对应值）分别被定义为 `smooth` 和 `pixelated`。

### 形式语法
```

image-rendering =   
  auto          |  
  smooth        |  
  high-quality  |  
  pixelated     |  
  crisp-edges     
  
```

示例
--
```

<div>
  <img class="auto" alt="auto" src="blumen.jpg" />
  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
</div>
```


```
img {
  height: 200px;
}
```



```css
.auto {
  image-rendering: auto;
}

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
```

规范
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | discrete |

**备注：** 虽然在最初此属性与 SVG 的 `image-rendering` 属性定义相近，但到现在，它们之间已有相当的差别。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### 备注

**备注：** 这是来自旧版浏览器兼容性表格的备注，保留以便查阅。可另行参阅 Can I use。

Internet Explorer 7 和 8 支持非标准的 `-ms-interpolation-mode` 属性，有两个属性值：`bicubic` 和 `nearest-neighbor`，和大量差距：

* 只应用于 `<img>` 等元素带的图片
* IE 7 上此属性只支持无透明度的图片
* 不能继承
* IE 7 默认值：`nearest-neighbor` (低质量)
* IE 8 默认值：`bicubic` (高质量)
* IE 9 不支持此非标准属性

WebKit 支持一个非标准属性：`-webkit-optimize-contrast`.

WebKit Nightly 支持，见 bug

Canvas 可以通过人工方式支持 crisp-edge/optimize-contrast 属性。
理解 CSS 的 z-index 属性
===================

通常情况下，HTML页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 `z-index`属性可让你在渲染内容时调整对象分层的顺序。

> 
> *在 CSS 2.1 中，所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z 轴”层叠摆放，当他们相互覆盖时，z 轴顺序就变得十分重要。*
> 
> 
> 

(参见 CSS 2.1 Section 9.9.1 - Layered presentation)

这意味着其实 CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。所有的层都可以用一个整数 ( z 轴顺序) 来表明当前层在 z 轴的位置。数字越大，元素越接近观察者。Z 轴顺序用 CSS 的 `z-index` 属性来指定。

使用 `z-index` 很简单：给它指定一个整数值即可。然而，在层叠比较复杂的 HTML 元素上使用 `z-index` 时，结果可能让人觉得困惑，甚至不可思议。这是由复杂的元素排布规则导致的。更多细节请参见 CSS-2.1 Appendix E 。

本文将通过一些简单的例子来解释这些规则。

1. Stacking without z-index : 默认的摆放规则，即不含有 z-index 属性时
2. Stacking and float : 浮动元素的处理方式
3. Adding z-index : 使用 z-index 来改变堆放顺序
4. The stacking context : 内容堆放注意事项
5. Stacking context example 1 : 在两层元素的第二层上使用 z-index
6. Stacking context example 2 : 在两层元素的所有层上使用 z-index
7. Stacking context example 3 : 在三层元素的第二层上使用 z-index
原始文档信息
------

* 作者：Paolo Lombardi
* This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* 上次更新时间：2005 年 7 月 9 日
Adding z-index
==============

### 使用 `z-index`

在第一个例子 Stacking without z-index中，我们描述了默认的摆放顺序。当你需要指定不同的排列顺序时，只要给元素指定一个 z-index 的数值就可以了。

该属性必须是整数 (正负均可)，它体现了元素在 z 轴的位置。如果你对 z 轴体系不了解，你也可以把它理解成“层叠”，每个层都有一个顺序数，顺序数大的层在上面，小的在下面。

**注意！z-index 只对指定了** positioned**属性的元素有效。**

* *底层：距离观察者最远*
* ...
* -3 层
* -2 层
* -1 层
* 0 层 *默认层*
* 1 层
* 2 层
* 3 层
* ...
* *顶部：最接近观察者*

**备注：**

* 当没有指定 z-index 的时候，所有元素都在会被渲染在默认层 (0 层)
* 当多个元素的 z-index 属性相同的时候 (在同一个层里面)，那么将按照 Stacking without z-index 中描述的规则进行布局。

在下一个例子中，所有的层都是用 z-index 进行排序的。元素 div#5 的 z-index 无效，因为他没有被指定 position 属性。

### Example source code


```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 opacity: 0.7;
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #normdiv {
 z-index: 8;
 height: 70px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv1 {
 z-index: 3;
 height: 100px;
 position: relative;
 top: 30px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv2 {
 z-index: 2;
 height: 100px;
 position: relative;
 top: 15px;
 left: 20px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #absdiv1 {
 z-index: 5;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 left: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #absdiv2 {
 z-index: 1;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 right: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
      <br />z-index: 5;
    </div>

    <div id="reldiv1">
      <br /><span class="bold">DIV #2</span> <br />position: relative;
      <br />z-index: 3;
    </div>

    <div id="reldiv2">
      <br /><span class="bold">DIV #3</span> <br />position: relative;
      <br />z-index: 2;
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #4</span> <br />position: absolute;
      <br />z-index: 1;
    </div>

    <div id="normdiv">
      <br /><span class="bold">DIV #5</span> <br />no positioning <br />z-index:
      8;
    </div>
  </body>
</html>
```

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005
Stacking context example 2
==========================

### 层叠上下文示例 2

这是一个非常简单的例子，但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个 DIV，不过现在 z-index 属性被分配在两个水平的层次结构中。

可以看到现在 DIV #2 (z-index: 2) 在 DIV #3 (z-index: 1) 的上面，因为他们都属于同一个层叠上下文（根元素创建的层叠上下文），所以 z-index 的值决定了元素如何叠放。

奇怪的是 DIV #2 (z-index: 2) 在 DIV #4 (z-index: 10) 的上面，尽管 DIV #2 的 z-index 值小于 DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4 处于 DIV #3 所创建的层叠上下文中，而整个 DIV #3（包含其后代元素）是在 DIV #2 下面的。

为了更好的理解这种情况，这里列出了层叠上下文的层次结构：

* 根上下文（root stacking context）
    + DIV #2 (z-index 2)
    + DIV #3 (z-index 1)
        - DIV #4 (z-index 10)

**备注：** 值得记住的是，通常 HTML 的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。

### 示例源码


```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #div2 {
 z-index: 2;
 }
 #div3 {
 z-index: 1;
 }
 #div4 {
 z-index: 10;
 }

 #div1,
 #div3 {
 height: 80px;
 position: relative;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 padding-left: 5px;
 }

 #div2 {
 opacity: 0.8;
 position: absolute;
 width: 150px;
 height: 200px;
 top: 20px;
 left: 170px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #div4 {
 opacity: 0.8;
 position: absolute;
 width: 200px;
 height: 70px;
 top: 65px;
 left: 50px;
 border: 1px dashed #000099;
 background-color: #ddddff;
 text-align: left;
 padding-left: 10px;
 }
 </style>
  </head>

  <body>
    <br />

    <div id="div1">
      <br />
      <span class="bold">DIV #1</span><br />
      position: relative;
      <div id="div2">
        <br />
        <span class="bold">DIV #2</span><br />
        position: absolute;<br />
        z-index: 2;
      </div>
    </div>

    <br />

    <div id="div3">
      <br />
      <span class="bold">DIV #3</span><br />
      position: relative;<br />
      z-index: 1;
      <div id="div4">
        <br />
        <span class="bold">DIV #4</span><br />
        position: absolute;<br />
        z-index: 10;
      </div>
    </div>
  </body>
</html>
```

### 相关文章

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### 原文信息

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005
层叠与浮动
=====

### 层叠与浮动

对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间：

1. 根元素的背景与边框
2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3. 浮动块元素
4. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

实际上，在接下来的例子中你会看到，非定位块元素 (DIV #4) 的背景与边框丝毫不会受到浮动块元素的影响，但内容却恰恰相反。出现这种情况是由于 CSS 的标准浮动行为引起的。

这种行为可以通过前一章列表的改进版本来解释：

1. 根元素的背景与边框
2. 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3. 浮动块元素
4. 常规流中的后代行内元素
5. 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

**备注：** 在下面的例子中，除了非定位的那个块元素外，所有的块元素都是半透明的，以便来显示层叠顺序。如果减少非定位元素 (DIV #4) 的透明度，会发生很诡异的事情：该元素的背景和边框会出现在浮动块元素上方，但是仍然处于定位元素的下方。我不能确定这是规范的 bug 或是怪异的解析。(设置透明度会隐式的创建一个层叠上下文。)

### 该示例的源码


```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Stacking and float</title>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #absdiv1 {
 position: absolute;
 width: 150px;
 height: 200px;
 top: 10px;
 right: 140px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #normdiv {
 /\* opacity: 0.7; \*/
 height: 100px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 10px 0px 10px;
 text-align: left;
 }

 #flodiv1 {
 margin: 0px 10px 0px 20px;
 float: left;
 width: 150px;
 height: 200px;
 border: 1px dashed #009900;
 background-color: #ccffcc;
 text-align: center;
 }

 #flodiv2 {
 margin: 0px 20px 0px 10px;
 float: right;
 width: 150px;
 height: 200px;
 border: 1px dashed #009900;
 background-color: #ccffcc;
 text-align: center;
 }

 #absdiv2 {
 position: absolute;
 width: 150px;
 height: 100px;
 top: 130px;
 left: 100px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
    </div>

    <div id="flodiv1">
      <br /><span class="bold">DIV #2</span> <br />float: left;
    </div>

    <div id="flodiv2">
      <br /><span class="bold">DIV #3</span> <br />float: right;
    </div>

    <br />

    <div id="normdiv">
      <br /><span class="bold">DIV #4</span> <br />no positioning
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #5</span> <br />position: absolute;
    </div>
  </body>
</html>
```

### 相关链接

* 未使用 z-index 的层叠：默认层叠规则
* 使用 z-index 的层叠：使用 z-index 来改变默认层叠顺序
* 层叠上下文：关于层叠上下文的注意事项
* 层叠上下文示例 1：两层嵌套标签的 HTML 中，z-index 作用在内层标签上
* 层叠上下文示例 2：两层嵌套标签的 HTML 中，z-index 作用在内外层标签上
* 层叠上下文示例 3：三层嵌套标签的 HTML 中，z-index 作用在中间层标签上
### 原始文档信息

* 作者：Paolo Lombardi
* 该文档的英文原始版本是从我为 YappY 写的意大利文章翻译而来的，该文章版权为 Creative Commons: Attribution-Sharealike license
* 上次更新于：2014 年 11 月 3 日
Stacking without z-index
========================

### 不含 z-index 的堆叠

当没有元素包含 z-index 属性时，元素按照如下顺序堆叠（从底到顶顺序）：

1. 根元素的背景和边界
2. 普通流 (无定位) 里的块元素 (没有 position 或者 position:static;) 按 HTML 中的出现顺序堆叠
3. 定位元素按 HTML 中的出现顺序堆叠

在接下来的例子中，相对和绝对定位的块元素的大小和位置刚好说明上述堆叠规则。

**备注：**

* 在一组由不含有任何 z-index 属性的同类元素，如例子中的定位块元素（DIV #1 至 #4），这些元素按照它们在 HTML 结构中出现的顺序堆叠，而不管它们的定位属性如何。
* 普通流中不含有定位属性的标准块元素（DIV #5）始终先于定位元素渲染并出现在定位元素的下层，即便它们在 HTML 结构中出现的位置晚于定位元素也是如此。

### 示例


```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #normdiv {
 height: 70px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv1 {
 opacity: 0.7;
 height: 100px;
 position: relative;
 top: 30px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv2 {
 opacity: 0.7;
 height: 100px;
 position: relative;
 top: 15px;
 left: 20px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #absdiv1 {
 opacity: 0.7;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 left: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #absdiv2 {
 opacity: 0.7;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 right: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
    </div>

    <div id="reldiv1">
      <br /><span class="bold">DIV #2</span> <br />position: relative;
    </div>

    <div id="reldiv2">
      <br /><span class="bold">DIV #3</span> <br />position: relative;
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #4</span> <br />position: absolute;
    </div>

    <div id="normdiv">
      <br /><span class="bold">DIV #5</span> <br />no positioning
    </div>
  </body>
</html>
```

### See also

* 堆叠与浮动 : 浮动元素的处理方式
* 增加 z-index : 使用 z-index 来改变堆放顺序
* 堆叠上下文 : 堆叠上下文的注意事项
* 堆叠上下文示例 1 : 在两层元素的第二层上使用 z-index
* 堆叠上下文示例 2 : 在两层元素的所有层上使用 z-index
* 堆叠上下文示例 3 : 在三层元素的第二层上使用 z-index
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005