Question

我只是想弄清楚元素堆叠顺序的默认HTML规则？对于父母和子女或连续兄弟元素的元素顺序是否有任何堆叠限制？（或者它是严格决定这个的CSS吗？）

为了清楚起见，我提供了这个例子。在此示例中，元素A堆叠在上元素B：Link

作为一个例子，我们可以说这是一个复杂父母的文件 - 儿童组合，

<div id="example">
    <span>Message: {{ message }}</span>
</div>
<script src="https://cdn.jsdelivr.net/g/vue@2.0.3,vuex@2.0.0"></script>

我希望这个问题足够明确。

更新：由于下面的答案，我已经建立了默认的兄弟元素HTML堆栈元素，当位置是固定的或绝对的时，它们会覆盖前一个元素之后的另一个元素。

见这里：https://jsfiddle.net/s8nzaoh9/

Answer 1

嗯，这取决于你如何放置它们。基本上，除非你使用像z-index这样的规则，否则它们会保持堆叠。就像，具有更大z-index的元素将来自其他元素。具有更大z-index的元素总是在具有较低z-index的元素的前面。我不知道为什么有理由不使用css来解决该问题。并且您可以堆叠尽可能多的元素你想要我想，一切都看起来很混乱，但要解决它，据我所知你至少需要一些css。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		#box1,#box2,#box3{
			width: 200px;
			height: 200px;
			border:1px solid black;
			position: relative;
		}
		#box1{
			background-color: red;
			z-index: 10;

		}
		#box2{
			background-color: green;
			margin-top: -30px;
			z-index: 20;

		}
		#box3{
			background-color: blue;
		}
	</style>
</head>
<body>

<div id="box1">
</div>

<div id="box2">
</div>

<div id="box3">
</div>
</body>
</html>

＆＃13;

尝试更改z-index的值，看看会发生什么

在HTML中，元素堆叠顺序的默认规则是什么？

1 个答案: