div后来居上 html,【CSS】误解：后来居上？？有时这是错的

2024-04-26 02:30:42

为方便以后查阅，先上镇楼图，来自神作：

【黄金法则】在同一层叠水平上的元素，排列时遵循以下规则：

谁大谁上：有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

===== 引起思考的代码 =====

【示例1】

body{ font-size:100px; font-weight:bold;}

#div1{

height:50px; width:100%;

background:pink;

color:red;

}

#div2{

height:60px; width:100%;

background:yellow;

color:blue;

}

第一个div

第二个div

效果如下：

div1的文字超出容器，原本按照“后来居上”的规则，div2应该是可以把div1遮盖的，但实际上，div1中的文字似乎挤到了div2的背景和文字之间。

看完全文再来看：没有新创建层叠上下文，都在根层叠上下文中，按层叠顺序排列，inline的文字在block上方。

【示例2】

将div1中的文字以一个新的

标签包裹。

div3将被div2遮挡，但文字仍然在div2的背景与文字之间。

看完全文再来看：3个div都是block层，遵循后来居上的规则，文字都是inline，在block之上。

【示例3】

将div1浮动float:left。

div2的背景由于div1浮动脱离文档流，来到了div1原始的位置，文字还保持在原位，而div1的文字依然在div2的文字与背景之间。

看完全文再来看：div1成为float层，到div2之上，文本依然都是inline。

【示例3】

将div2浮动float:left。

div2的文字被div1的文字遮挡了。

看完全文再来看：div2成为float层，文本被div1的文本遮挡。(此处神图无法解释，我猜想float也可以形成层叠上下文，也就是说div2中的文字其实已经不再和div或其他元素比较层叠顺序了，而是在div2中的子项之间比较)

【示例4】

将div1和div2同时浮动float:left。

div2把div1包括文字都遮挡了。

看完全文再来看：div1，div2都成为float层，div2后来居上。(div1的文字被遮挡可能是因为示例3中的猜测，float后，内部的元素成为一个整体参与顺序的排列)

【示例5】

将div2设置position:relative，效果同【示例4】。

看完全文再来看：div2设置为position:relative后，自动有了z-index值，即auto,所以比inline的顺序更高。

测了半天之后，我完全混乱了。和同事讨论了一下，似乎都找不到一个比较可信的理由解释这些现象，包括网上一些关于float的说明也被挖出来，但我始终觉得怪怪的。

最后找到了文章顶部链接的神作。

=============== 初步理解 ================

【层叠上下文】(stacking context)

可以把它看成一种容器，其中可以嵌套其他层叠上下文，又各自与它的兄弟独立，自成体系。每个层叠上下文中的元素，按照一定的层叠水平排列，体现为元素靠近用户的程度。

【层叠上下文特性】

1 层叠水平比普通元素高——更靠近用户；

2 每个层叠上下文与兄弟独立，也就是当进行层变化或渲染的时候，只需要考虑后代元素；

3 每个层叠上下文自成体系，当其发生层叠时，在父层叠上下文中以整个元素加入到层叠顺序中。

【产生层叠上下文的条件】

1 页面根元素本身就是一个层叠上下文；

2 position 为 absolute/relative/fixed 且 z-index 为数值的元素也会形成层叠上下文；

- webkit 内核的浏览器中近来将 fixed 元素默认形成了层叠上下文，id/firefox 中仍需要 z-index 为数值。

3 css3属性影响形成的层叠上下文(此处暂不讨论，有兴趣可以参见神作，其中有详细描述)

4?? (根据自己的测试代码得出，正确性有待验证)float元素中不创建层叠上下文的子元素，会成为float元素的整体，而不会单独比较再参与上一级层叠上下文的层叠顺序。

【层叠上下文中的层叠水平】

见镇楼图。

所以在引发这个问题的研究的例子中，div1和div2都在同一个层叠上下文中，并且没有形成新的层叠上下文，所以他们全部的内容都会按照上面那张图中的顺序排列，相同类型(div1和div2都是block，其中的内容都是inline)的元素按照我们熟知的“后来居上，谁大谁上”的原则排列。因此，div1的文字比block的div2层级高，但和div2中文字的层级一致，由于先到，所以就只能被遮挡了。

同时，这个原理也同样可以说明，为什么div1浮动后，div2的背景到div1后面，div1的字却在div1与div2的字之间。

div后来居上 html,【CSS】误解：后来居上？？有时这是错的相关推荐

html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
在div中使用css让文字底部对齐的方法
2019独角兽企业重金招聘Python工程师标准>>> css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对 ...
html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
让div水平居中的css方法
一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的) 1.给要设置水平居中的div设置display:block ,marg ...
html实现div变透明,css实现父div透明子div内容不透明
标题可能不是很专业,只要你有一点前端基础的应该能看懂意思,昨天没休息好,今天写项目有点飘,总是写了尾巴忘了头,年轻少熬夜*-* 如标题今天记录三个Css属性 opacity rgb rgba 下面来讲 ...
div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
html语言div什么意思,css中div是什么意思？
css中div是什么意思? div是html中的一个标签,通常作为容纳其他元素的容器.在css中,表示一种选择器,可以直接使用div(标签选择器)来查找HTML元素设置样式:而如果是.div那么表示某 ...
html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...
html语言中div怎么起名,css如何命名？
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.网页制作中规范使用DIV+CSS命名规则,可以改善优化功 ...
html设置表格和div的距离,CSS/HTML Div调整大小和表格定位
我有3个div,父div,子div在顶部,另一个在底部.任何帮助将不胜感激,这里是我想达到的目标:CSS/HTML Div调整大小和表格定位当顶格调整大小/增加其大小,包含表将缩小,但保持在其位置上 ...

最新文章

热门文章