前在项目的过程中遇到了一个问题,某个 div 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下 CSS 相关资料,解决了这个问题的同时,也学习了很多知识,特此和大家分享一下。
屏幕是一个二维平面,然而 HTML 元素却是排列在三维坐标系中, x 为水平方向, y 为垂直方向, z为屏幕由内向外方向,我们在看屏幕的时候是沿着 z 轴方向从外向内的。由此,元素在用户视角就形成了层叠的关系,某个元素可能覆盖了其他元素也可能被其他元素覆盖;
这里有几个重要的概念:层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)、z-index、BFC(块级格式化上下文,Block Formatting Context),这些概念共同决定了你看到元素的位置,下面我们就围绕着这几个概念来一起学习一下。
声明:
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) 上的层叠层。他们各自也都形成了新的层叠上下文,其中包含着新的层叠上下文。
在层叠上下文中,其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有:
总结:
2. 层叠等级 (Stacking Level)
层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中,元素在 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) 描述的是元素在同一个层叠上下文中的顺序规则(之前的层叠上下文和层叠等级是概念),从层叠的底部开始,共有七种层叠顺序:
第 7 级顺序的元素会显示在之前顺序元素的上方,也就是看起来覆盖了更低级的元素:
除层叠顺序优先级规则之外,还有一条后来居上规则:同一个层叠顺序的元素按照在 HTML 里出现的顺序依次层叠。这两个规则共同决定浏览器元素在文档中是如何层叠的。
5. 文档流 (Document Flow)
5.1 常规流 (Normal flow)
5.2 浮动 (Floats)
5.3 绝对定位 (Absolute positioning)
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 的方式有:
注意: 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 属性时,这个例子中的元素按照如下顺序层叠(从底到顶顺序):
红绿蓝都属于 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
这个例子中,红蓝绿黄元素的父元素中都没有生成新的层叠上下文,都属于根层叠上下文中的元素
所以这个例子中的从底到高显示的顺序就是:黄->红->蓝->绿
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 的定位元素,不过他们的父元素创建了新的层叠上下文;
所以这个例子中从低到到显示的顺序:蓝->红->绿
(我遇到的的情况就属于这个例子类似情形)
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 也可以形成层叠上下文,因此:
所以这个例子中从低到到显示的顺序:黄->红->绿->蓝
关注微信公众号:安徽思恒信息科技有限公司,了解更多技术内容……
多学员在学习的过程中都遇到过这样的问题:为什么老师讲的我都能听懂,然而做起来却总是诸多问题?千锋重庆校区老师告诉你,其实这是正常现象,谁也不能几天就成为大师,你的实践还太少了!练习多了,经验多了,静态网页自然也就手到擒来。
静态的网页其实就是由两部分组成,一个是底层结构HTML,另外一个就是负责修饰结构的CSS。其实书写静态网页就像小时候过家家,首先得把需要的家庭成员找齐了,即首先考虑要做一个什么样的网站,例如一个综合类网站包括:搜索框、导航、文章类别模块、文章标题以及一部分广告板块;一个博客主页包括:导航、文章缩略、文章搜索、文章导航以及没有显示但可能会有的评论区。
写页面的时候是有剧本的,这个剧本指网页设计图,或者某个现有网页,建议大家在模仿网上现有网页的时候利用浏览器自带的截图功能,把整个完整的页面截取下来,QQ浏览器,360浏览器都可以做到。这样的优点在于可以利用PS自己一步步测量数据、切图都做到亲力亲为,并且做到了页面数据的精准度,而不是随意的给数据,或者是利用浏览器的F12功能查看原网页的数据。
按照设计好的剧本接着就可以找对应的成员了,例如百度网页从上往下分为导航头部、中间logo和表单、尾部二维码和文字,相对来说页面的整体布局是比较简单的,当然还有很多不同类型的页面,布局要复杂一些。
当看到一个网页时,需要在脑海当中对页面进行一个简单的扫描,如果把页面当成一张纸,要怎么样从大到小一点点分割。当有了初步的认识之后,就可以把这些东西转化成HTML结构,所有不同颜色的框框在写的时候用的都是DIV。
从上往下,从大到小一点点先把某个模块以不同的颜色色块利用代码堆积出来。保证大的模块布局没问题之后,在往里面放一些小的东西,比如图片img、表单form input、文字、超链接a、列表ul li,这时候简单的页面结构就出来了。
接下来要把写好的结构进行美化,不然页面就会一团乱麻,没有美感,而网页当中润色部分是用CSS来做的。这个环节需要更加细心,例如百度首页导航红色框整体在绿色框的右边,需要给红色框添加float:right;红色框里面文字的字号大小,字体,字体颜色,水平间距,垂直间距都需要一点点写。如果在写的过程中遇见了问题,可以借助Chrome浏览器的调试功能,哪里错了用箭头点哪里,结构看左边,CSS看右边,看看CSS属性有没有显示,有没有划掉,有没有黄色报错等等。
在做页面时,需要大量的练习,才可以熟能生巧。一个页面写完之后,总结一下这个页面在书写过程中遇到了哪些问题,是怎么解决的,为什么这样解决,深入思考这个模块的这个效果可不可以用其他的方法来实现,以做到举一反三。
千锋重庆HTML5大前端培训,配合实战项目讲解网站页面布局,让你从容应对HTML、CSS的学习,基础打好了,才能更有信心面对之后的挑战。
许多方法可以将HTML元素与CSS对齐,但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。
因此,在本文中,我将展示一些最常用的方法,即通过使用不同的CSS属性在水平和垂直方向上居中图像。
让我们开始使用3个不同的CSS属性将图像水平居中。
使图像水平居中的第一种方法是使用text-align属性。但是,仅当图像位于块级容器(例如<div>)内时,此方法才有效:
使图像居中的另一种方法是使用margin:auto属性(用于左边距和右边距)。但是,单独使用margin:Auto将不适用于图像。如果需要使用margin:auto,则还必须使用2个其他属性。
margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素,因此我们需要先将其转换为块级元素:
其次,我们还需要定义宽度。因此,左右边缘可以占用其余的空白空间并自动对齐,可以这样解决问题(除非我们给出100%的宽度):
将图像水平居中的第三种方法是使用display:flex。同样,我们对容器使用text-align属性,它也会使用display:flex。但是,仅使用display:flex是不够的。容器还必须具有一个称为justify-content的附加属性。
justify-content属性与display:flex一起使用,我们可以使用它水平放置图像的中心。最后,图像的宽度必须小于容器的宽度,否则,它会占用100%的空间,然后我们就无法对其进行集中化。
1、Display: Flex
对于垂直对齐,使用display:flex确实很有帮助。考虑到我们的容器的高度为800px,但图像的高度仅为500px:
现在,在这种情况下,向容器中添加一行代码(align-items:center)就可以了:
如果将align-items属性与display:flex一起使用,就会将元素垂直放置。
2、位置:绝对和变换属性
垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂,所以让我们一步一步地做。
步骤1:定义绝对位置
首先,我们将图像的定位行为从静态更改为绝对:
同样,它应该位于相对放置的容器内,因此我们添加一个位置:相对于其容器的div。
步骤2:定义顶部和左侧属性
其次,我们定义图像的顶部和左侧属性,并设置为50%。这会将图像的起点(左上角)移到容器的中心:
步骤3:定义变换属性
在第二步的时候已经将图像的一部分移出容器。因此,我们需要将其取回内部。在图像上定义转换属性,并在其X和Y轴上添加负50%可以达到目的:
还可以使用其他方法进行水平和垂直居中,我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。
*请认真填写需求信息,我们会在24小时内与您取得联系。