级链接标签

1. 语法<a></a>
2. 必须属性href=”url”， 它指定链接的目标。
3. 常用属性 target=”_blank” 在新窗口中打开链接
4. 锚属性：一般在两个页面之间 或者在一个较长的页面之间 进行通讯所用

目的页面的地区用 name属性定义（name的值可自己定义，一般为英文），链接页面的链接应写为<a href=”url#name”></a>

1. 在链接中，#可用来指代链接出发点的页面本身
2. 链接有四种状态，在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

关于锚的进一步说明：

<a> 标签可定义锚，锚 (anchor) 有两种用法：

通过使用 href 属性，创建指向另外一个文档的链接（或超链接）

通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）

图片标签 <img>

1、img标签是一个单标签，必须和src（source：指出图像的路径）属性连用，

网页上图像的路径有绝对路径和相对路径两种，但在实际运用中往往只用相对路径

绝对路径：图片在硬盘上的路径 （分割符号是/）

相对路径：图片相对于网页而言的路径

如果图片与网页在同一个文件夹下，那么可以直接用图片的名称表示其路径

如果图片在网页的下一层文件夹中，比如图片在网页文件下面的images文件夹中，则可用images/表示

我们也可以用./表示网页所在的文件夹

如果图片在网页的上一层文件夹中，则用../表示

事实上，不但图片文件是如此，网页中应用的文件都分为相对路径和绝对路径两种表达方式。

2、在网页上，支持的图片格式包括.gif .jpg .png .bmp,一般用前三者居多，因为前三者的图片压缩比较好。但是，gif格式只有256种颜色，所以，在需要丰富颜色的场合，往往多用jpg和png格式。不过，gif拥有动态功能，而后两者则不具备。

3、img标签可以与其它标签共处一行，如果有多个图形出现时，默认为同一行显示

4、img标签有4个常用标签，分别是

alt 图片说明，在图像无法显示时表现为图像的替代文本

width 宽 属性值可以是象素，也可以是%

height 高 属性值可以是象素，也可以是%

border 边框

5、图片链接仍然是用a标签来显示

例子：<a href=“http://www.rwxy.xnc.edu.cn”><img src="sample.jpg" ></a>

6、可以用图像映射实现图像不同区域的链接

图象映射

所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。

图象映射由<map>定义。<map>有一个基本属性是name。name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。

<map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)

图象映射实例

<img src="bear.jpg" usemap="#map" >

<map name=“map">

<area shape="rect" coords="46,29,253,164" href="#" >

<area shape="circle" coords="76,510,59" href="#" >

<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" >

</map>

表格标签

表格由三个标签构成，分别是

<table>...</table> - 定义表格

<tr> - 定义表行

<th> - 定义表头

<td> - 定义表格单元(表格的具体数据)

在表格标签中，table、tr、td标签都具备不同的属性

table：border（边框尺寸设置）；width（表格的宽）；height（表格的高）；align（横向对齐：left center right）；bgcolor（背景色彩）；background（背景图像）；cellspacing（表格单元的间隙设置）；cellpadding（表元内部空白设置）；

tr：height（行高）；align（横向对齐：left center right）；valign（纵向对齐：top middle bottom）；bgcolor（背景色彩）；

td：width（表格的宽）；height（表格的高）；align（横向对齐：left center right）；valign（纵向对齐：top middle bottom）；bgcolor（背景色彩）；background（背景图像）；

注：当talble、tr、td有共同的属性而且属性值发生冲突之际，其优先性是td > tr > table

表格在html中最大的作用不是用来整理数据，而是用来排版，所以它是html中用处最广的标签之一。

表格内部可以继续放入表格，这被称之为表格嵌套，利用表格嵌套可以制作出非常复杂的排版。

表格的单元格可以跨行跨列显示

跨多列的单元格 <td colspan=#>

<table border=1>

<tr><td colspan=3> morning menu</td>

<tr><td>food</td> <td>drink</td> <td>sweet</td>

<tr><td>a</td><td>b</td><td>c</td>

</table>

morning menu

food

drink

sweet

a

b

c

跨多行的单元格 <td rowspan=#>

<table border=1>

<tr><td rowspan=3> morning menu</td>

<td>food</td> <td>a</td></tr>

<tr><td>drink</td> <td>b</td></tr>

<tr><td>sweet</td> <td>c</td></tr>

</table>

morning menu

food

a

drink

b

sweet

c

....................................................................

我的微信公众号：UI严选 —越努力，越幸运

单标签

网页（程序）如果要和用户产生互动，则必须借助一定的中介，这个中介一般是：文本输入框、按钮、多选框、单选框。而表单则是这些中介和放置这些中介的空间（<form action=”” methon=””></form>）。

在网页中，这些文本输入框、按钮等等必须放置在由<form></form>这个标签所定义的空间中，否则没有实际意义。所以，由<form></form>标签所定义的空间就是表单存在的空间。

【各种输入类型】

1. 文字输入框：每个表单之所以会有不同的类型，原因就在于type="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是type="text，其使用方法如下：

呈现结果

姓名：

原始码

<form action=http://www.baidu.com/nameproject.aspmethon=”post”>

姓名：<input type="text" name="name" size="20">

</form>

它有下列可设定之属性：

• name="名称"，是设定此一栏位的名称，程式中常会用到。
• size="数值"，是设定此一栏位显现的宽度。
• value="预设内容"，是设定此一栏位的预设内容。
• align="对齐方式"，是设定此一栏位的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对置中）、absbottom（绝对置下）等。
• maxlength="数值"，是设定此一栏位可设定输入的最大长度。

1. 单选框：利用type="radio"就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。

呈现结果

性别：男 女

原始码

<form>

性别：

男 <input type="radio" name="sex" value="boy">

女 <input type="radio" name="sex" value="girl">

</form>

它有下列可设定之属性：

• name="名称"，是设定此一栏位的名称，程式中常会用到。
• value="内容"，是设定此一栏位的内容、值或是意义。
• align="对齐方式"，是设定此一栏位的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对置中）、absbottom（绝对置下）等。
• checked，是设定此一栏位为预设选取值。

1. 复选框：利用type=" checkbox "就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。

呈现结果

喜好： 电影 看书

原始码

<form>

喜好：

<input type="checkbox" name="sex" value="movie">电影

<input type="checkbox" name="sex" value="book">看书

</form>

它有下列可设定之属性：

• name="名称"，是设定此一栏位的名称，程式中常会用到。
• value="内容"，是设定此一栏位的内容、值或是意义。
• align="对齐方式"，是设定此一栏位的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对置中）、absbottom（绝对置下）等。
• checked，是设定此一栏位为预设选取值。

1. 密码表单：利用type=" password "就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差别就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。

呈现结果

请输入密码：

原始码

<form>

请输入密码：<input type="password" name="input">

</form>

它有下列可设定之属性：

• name="名称"，是设定此一栏位的名称，程式中常会用到。
• size="数值"，是设定此一栏位显现的宽度。
• value="预设内容"，是设定此一栏位的预设内容，不过呈现出来仍是星号。
• align="对齐方式"，是设定此一栏位的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对置中）、absbottom（绝对置下）等。
• maxlength="数值"，是设定此一栏位可设定输入的最大长度。

1. 送出按钮：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用type=" submit "及type=" reset "来产生，相当的简单易用。

呈现结果

原始码

<form>

<input type="submit" value="送出资料">

<input type="reset" value="重新填写">

</form>

它有下列可设定之属性：

• name="名称"，是设定此一按钮的名称。
• value="文字"，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上“送出查询”、“重设”等字样。
• align="对齐方式"，是设定此一栏位的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对置中）、absbottom（绝对置下）等。

1. 按钮元件：表单中或是java script常会用到按钮来作一些效果，因此，我们可以利用type=" button "来产生一个按钮，相当简单。

呈现结果

请按下按钮：

原始码

<form>

请按下按钮：<input type="button" name="ok" value="我同意">

</form>

它有下列可设定之属性：

• name="名称"，是设定此一按钮的名称。
• value="文字"，是设定此一按钮上要呈现的文字。
• align="对齐方式"，是设定此一栏位的对齐方式，其值有：top（向上对齐）、middle（向中对齐）、bottom（向下对齐）、right（向右对齐）、left（向左对齐）、texttop（向文字顶部对齐）、baseline（向文字底部对齐）、absmiddle（绝对置中）、absbottom（绝对置下）等。

1. 隐藏栏位：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用type=" hidden "来产生一个隐藏的栏位。

呈现结果

隐藏栏位：

原始码

<form>

隐藏栏位：<input type="hidden" name="nosee" value="看不到">

</form>

它有下列可设定之属性：

• name="名称"，是设定此一栏位的名称。
• value="文字"，是设定此一栏位的值、文字或意义。

【大量文字输入元件】

1. 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用<textarea></textarea>来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。

呈现结果

请输入您的意见：

原始码

<form>

请输入您的意见：<br>

<textarea name="talk" cols="20" rows="3"></textarea>

</form>

它有下列可设定之属性：

• name="名称"，是设定此一栏位的名称。
• wrap="设定值"，是设定此一栏位的换行模式。设定值有三种：off（输入文字不会自动换行）、virtual（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下enter换行，送出资料时，也视为没有换行）、physical（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效果送出）。
• cols="数值"，是设定此一栏位的行数（横向字数）。
• rows="数值"，是设定此一栏位的列数（垂直字数）。

【下拉式选单】

1. 下拉式选单令整个网页看起来有很专业的感觉，我们只要利用<select name="名称">便可以产生一个下拉式选单，另外，还需要配合<option>标签来产生选项，这样才算完整喔！

呈现结果

您喜欢看书吗？：

非常喜欢

还算喜欢

不太喜欢

非常讨厌

原始码

<form>

您喜欢看书吗？：

<select name="like">

<option value="非常喜欢">非常喜欢

<option value="还算喜欢">还算喜欢

<option value="不太喜欢">不太喜欢

<option value="非常讨厌">非常讨厌

</select>

</form>

它有下列可设定之属性：

1. size="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将size设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。

multiple，是设定此一栏位为复选，可以一次选好几个选项。

....................................................................

我的微信公众号：UI严选 —越努力，越幸运

前在项目的过程中遇到了一个问题，某个 div 希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下 CSS 相关资料，解决了这个问题的同时，也学习了很多知识，特此和大家分享一下。

屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中， x 为水平方向， y 为垂直方向， z为屏幕由内向外方向，我们在看屏幕的时候是沿着 z 轴方向从外向内的。由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；

这里有几个重要的概念：层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)、z-index、BFC（块级格式化上下文，Block Formatting Context），这些概念共同决定了你看到元素的位置，下面我们就围绕着这几个概念来一起学习一下。

声明：

1. 以下定位元素指的是 position:absolute|fixed|relative|sticky
2. 以下非定位元素指的是 position:initial|static
3. 本文蛮长的，但是如果你可以仔细看完，那对相关概念的掌握就非常好了 (～o￣▽￣)～

1. 层叠上下文 (Stacking Context)

层叠上下文 (堆叠上下文, Stacking Context)，是 HTML 中一个三维的概念。在 CSS2.1 规范中，每个元素的位置是三维的，当元素发生层叠，这时它可能覆盖了其他元素或者被其他元素覆盖；排在 z 轴越靠上的位置，距离屏幕观察者越近。

文章 <关于z-index 那些你不知道的事> 有一个很好的比喻，这里引用一下；

可以想象一张桌子，上面有一堆物品，这张桌子就代表着一个层叠上下文。如果在第一张桌子旁还有第二张桌子，那第二张桌子就代表着另一个层叠上下文。现在想象在第一张桌子上有四个小方块，他们都直接放在桌子上。在这四个小方块之上有一片玻璃，而在玻璃片上有一盘水果。这些方块、玻璃片、水果盘，各自都代表着层叠上下文中一个不同的层叠层，而这个层叠上下文就是桌子。

每一个网页都像一个房间，这个房间就是 <html></html>，其他层叠上下文就像这个房间里的桌子，HTML 标签中的一切都被置于这个房间中。

当给一个元素的 position 值赋为 fixed 或 sticky 值时，你就创建了一个新的层叠上下文，其中有着独立于页面上其他层叠上下文和层叠层的层叠层，这就相当于你把另一张桌子带到了房间里。

层叠上下文 1 (Stacking Context 1)是由文档根元素形成的， 层叠上下文 2 和 3 (Stacking Context 2, 3) 都是层叠上下文 1 (Stacking Context 1) 上的层叠层。他们各自也都形成了新的层叠上下文，其中包含着新的层叠上下文。

在层叠上下文中，其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有：

• 根元素 <html></html>；
• position 值为 absolute|relative，且 z-index 值不为 auto；
• position 值为 fixed|sticky；
• z-index 值不为 auto 的 flex 元素，即父元素属性 display:flex|inline-flex；
• opacity 属性值小于 1 的元素；
• transform 属性值不为 none 的元素；
• mix-blend-mode 属性值不为 normal 的元素；
• filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path值不为 none 的元素；
• perspective 值不为 none 的元素；
• isolation 属性被设置为 isolate 的元素；
• will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性设置为 touch 的元素；

总结:

1. 层叠上下文可以包含在其他层叠上下文中，并且一起组建了一个有层级的层叠上下文；
2. 每个层叠上下文完全独立于它的兄弟元素，当处理层叠时只考虑子元素，类似于 BFC；
3. 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠；

2. 层叠等级 (Stacking Level)

层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中，元素在 z 轴上的显示的顺序；

1. 普通元素的层叠等级优先由其所在的层叠上下文决定；
2. 层叠等级的比较，只有在同一个层叠上下文元素中才有意义；
3. 在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序；

对于普通元素的层叠水平探讨只局限于在当前层叠上下文中：

层叠上下文本身是一个强力的「层叠结界」，普通的元素水平是无法突破这个结界和结界外的元素去较量层叠水平的。

— CSS 世界

另外，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定，详细的规则见下面层叠顺序的介绍。

3. z-index

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

-- CSS 2.1 Section 9.9.1 - Layered presentation

z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、 0、 auto，如果一个定位元素没有设置 z-index，那么默认为 auto；

元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

4. 层叠顺序 (Stacking Order)

层叠顺序 (层叠次序, 堆叠顺序, Stacking Order) 描述的是元素在同一个层叠上下文中的顺序规则（之前的层叠上下文和层叠等级是概念），从层叠的底部开始，共有七种层叠顺序：

1. 背景和边框：形成层叠上下文的元素的背景和边框。
2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低；
3. 块级盒：文档流中的块级、非定位子元素；
4. 浮动盒：非定位浮动元素；
5. 行内盒：文档流中行内、非定位子元素；
6. z-index: 0： z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文；
7. 正 z-index 值： z-index 为正的定位元素，正的越大层叠等级越高；

第 7 级顺序的元素会显示在之前顺序元素的上方，也就是看起来覆盖了更低级的元素：

除层叠顺序优先级规则之外，还有一条后来居上规则：同一个层叠顺序的元素按照在 HTML 里出现的顺序依次层叠。这两个规则共同决定浏览器元素在文档中是如何层叠的。

5. 文档流 (Document Flow)

5.1 常规流 (Normal flow)

• 在常规流中，盒一个接着一个排列;
• 在块级格式化上下文里面， 它们竖着排列；
• 在行内格式化上下文里面， 它们横着排列;
• 当 position 为 static 或 relative，并且 float 为 none 时会触发常规流；
• 对于静态定位(static positioning)， position:static，盒的位置是常规流布局里的位置；
• 对于相对定位(relative positioning)， position:relative，盒偏移位置由 top、 bottom、 left、 right 属性定义。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

5.2 浮动 (Floats)

1. 左浮动元素尽量靠左、靠上，右浮动同理；
2. 这导致常规流环绕在它的周边，除非设置 clear 属性；
3. 浮动元素不会影响块级元素的布局；
4. 但浮动元素会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局；
5. 最高点不会超过当前行的最高点、它前面的浮动元素的最高点；
6. 不超过它的包含块，除非元素本身已经比包含块更宽；
7. 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的；

5.3 绝对定位 (Absolute positioning)

1. 绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
2. 它的定位相对于它的包含块，相关 CSS 属性： top、 bottom、 left、 right；
3. 如果元素的属性 position 为 absolute 或 fixed，它是绝对定位元素；
4. 对于 position:absolute，元素定位将相对于上级元素中最近的一个 relative、 fixed、 absolute，如果没有则相对于 body；

6. BFC （Block Formatting Context）

6.1 什么是 BFC

BFC (Block Formatting Context) 块级格式化上下文，是用于布局块级盒子的一块渲染区域，相对应的还有 IFC（Inline Formatting Context）内联格式化上下文，不是本文重点，读者可以自行查阅相关知识。

BFC 是 Web 页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

— MDN - 块格式化上下文

一个 BFC 的范围包含创建该上下文元素的所有子元素，但不包括创建了新 BFC 的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个 BFC 中。因为如果一个元素能够同时处于两个 BFC 中，那么就意味着这个元素能与两个 BFC 中的元素发生作用，就违反了 BFC 的隔离作用。

触发 BFC 的方式有：

1. 根元素，即 HTML 标签;
2. 浮动元素，即 float 值为 left、 right;
3. overflow 值不为 visible，即值为 auto、 scroll、 hidden；
4. display 值为 inline-block、 table-cell、 table-caption、 table、 inline-table、 flex、 inline-flex、 grid、 inline-grid；
5. 定位元素： position 值为 absolute、 fixed；
6. contain 为 layout、 content、 paint 的元素；

注意： display:table 也可以生成 BFC 的原因在于 Table 会默认生成一个匿名的 table-cell，是这个匿名的 table-cell 生成了 BFC。

6.2 用法

1. 阻止相邻元素的 margin 合并

属于同一个 BFC 的两个相邻块级子元素的上下 margin 会发生重叠，(设置 writing-mode:tb-rl时，水平 margin 会发生重叠)。所以当两个相邻块级子元素分属于不同的 BFC 时可以阻止 margin 重叠。可以给任一个相邻块级盒子的外面包一个 div，通过改变此 div 的属性使两个原盒子分属于两个不同的 BFC，以此来阻止 margin 重叠。

代码和预览参见：Codepen - 使用BFC阻止margin合并：https://codepen.io/SHERlocked93/pen/eVOevN

2. 阻止元素被浮动元素覆盖

一个正常文档流的块级元素可能被一个 float 元素覆盖，挤占正常文档流，因此可以设置一个元素的 float、 display、 position 值等方式触发 BFC，以阻止被浮动盒子覆盖。

代码和预览参见：Codepen - 使用BFC阻止元素被浮动元素覆盖：https://codepen.io/SHERlocked93/pen/pazdzB

3. 包含浮动元素

通过改变包含浮动子元素的父盒子的属性值，触发 BFC，以此来包含子元素的浮动盒子。

代码和预览参见：Codepen - 使用BFC包含浮动元素：https://codepen.io/SHERlocked93/pen/OQLOqG

7. 实战

下面一起来看几个例子实战一下，帮助理解。

7.1 普通情况

三个 relative 定位的 div 块中各有 absolute 的不同颜色的 span.red、 span.green、 span.blue，它们都设置了 position:absolute；

代码和预览参见：Codepen - 普通情况：https://codepen.io/SHERlocked93/pen/aaPord

那么当没有元素包含 z-index 属性时，这个例子中的元素按照如下顺序层叠（从底到顶顺序）：

1. 根元素的背景和边界；
2. 块级非定位元素按 HTML 中的出现顺序层叠；
3. 行内非定位元素按 HTML 中的出现顺序层叠；
4. 定位元素按 HTML中的出现顺序层叠；

红绿蓝都属于 z-index 为 auto 的定位元素，因此按照 7 层层叠顺序规则来说同属于层叠顺序第 6 级，所以按 HTML 中的出现顺序层叠：红->绿->蓝

7.2 在相同层叠上下文的父元素内的情况

红绿位于一个 div.first-box 下，蓝位于 div.second-box 下，红绿蓝都设置了 position:absolute， first-box 与 second-box 都设置了 position:relative；

代码和预览参见：Codepen - 父元素不同但都位于根元素下：https://codepen.io/SHERlocked93/pen/RYENBw

这个例子中，红蓝绿元素的父元素 first-box 与 second-box 都没有生成新的层叠上下文，都属于根层叠上下文中的元素，且都是层叠顺序第 6 级，所以按 HTML 中的出现顺序层叠：红->绿->蓝

7.3 给子元素增加 z-index

红绿位于一个 div.first-box 下，蓝黄位于 div.second-box 下，红绿蓝都设置了 position:absolute，如果这时给绿加一个属性 z-index:1，那么此时 .green 位于最上面；

如果再在 .second-box 下 .green 后加一个绝对定位的 span.gold，设置 z-index:-1，那么它将位于红绿蓝的下面；

代码和预览参见：Codepen - 设置了z-index：https://codepen.io/SHERlocked93/pen/gdZOrK

这个例子中，红蓝绿黄元素的父元素中都没有生成新的层叠上下文，都属于根层叠上下文中的元素

1. 红蓝都没有设置 z-index，同属于层叠顺序中的第 6 级，按 HTML 中的出现顺序层叠；
2. 绿设置了正的 z-index，属于第 7 级；
3. 黄设置了负的 z-index，属于第 2 级；

所以这个例子中的从底到高显示的顺序就是：黄->红->蓝->绿

7.4 在不同层叠上下文的父元素内的情况

红绿位于一个 div.first-box 下，蓝位于 div.second-box 下，红绿蓝都设置了 position:absolute，如果 first-box 的 z-index 设置的比 second-box 的大，那么此时无论蓝的 z-index 设置的多大 z-index:999，蓝都位于红绿的下面；如果我们只更改红绿的 z-index 值，由于这两个元素都在父元素 first-box 产生的层叠上下文中，此时谁的 z-index 值大，谁在上面；

代码和预览参见：Codepen - 不同层叠上下文的父元素：https://codepen.io/SHERlocked93/pen/gdZbOJ

这个例子中，红绿蓝都属于设置了 z-index 的定位元素，不过他们的父元素创建了新的层叠上下文；

1. 红绿的父元素 first-box 是设置了正 z-index 的定位元素，因此创建了一个层叠上下文，属于层叠顺序中的第 7 级；
2. 蓝的父元素 second-box 也同样创建了一个层叠上下文，属于层叠顺序中的第6级；
3. 按照层叠顺序， first-box 中所有元素都排在 second-box 上；
4. 红绿都属于层叠上下文 first-box 中且设置了不同的正 z-index，都属于层叠顺序中第 7 级；
5. 蓝属于层叠上下文 second-box，且设置了一个很大的正 z-index，属于层叠元素中第 7 级；
6. 虽然蓝的 z-index 很大，但是因为 second-box 的层叠等级比 first-box 小，因此位于红绿之下；

所以这个例子中从低到到显示的顺序：蓝->红->绿

(我遇到的的情况就属于这个例子类似情形)

7.5 给子元素设置 opacity

红绿位于 div.first-box 下，蓝位于 div.second-box 下，红绿蓝都设置了 position:absolute，绿设置了 z-index:1，那么此时绿位于红蓝的最上面；

如果此时给 first-box 设置 opacity:.99，这时无论红绿的 z-index 设置的多大 z-index:999，蓝都位于红绿的上面；

如果再在 .second-box 下 .green 后加一个 span.gold，设置 z-index:-1，那么它将位于红绿蓝的下面；

代码和预览参见：Codepen - opacity的影响：https://codepen.io/SHERlocked93/pen/GXPRWB

之前已经介绍了，设置 opacity 也可以形成层叠上下文，因此：

1. first-box 设置了 opacity， first-box 成为了一个新的层叠上下文；
2. second-box 没有形成新的层叠上下文，因此其中的元素都属于根层叠上下文；
3. 黄属于层叠顺序中第 2 级，红绿属于第 7 级， first-box 属于第 6 级，蓝属于层叠顺序中第6级且按HTML出现顺序位于 first-box 之上；

所以这个例子中从低到到显示的顺序：黄->红->绿->蓝

关注微信公众号：安徽思恒信息科技有限公司,了解更多技术内容……