对于HTML5+CSS3图层的理解

最新推荐文章于 2021-07-21 02:17:17 发布

原创最新推荐文章于 2021-07-21 02:17:17 发布 · 636 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #html5

html+css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在HTML5和CSS3中如何利用z-index属性来管理元素的层级关系，通过实例说明了子元素继承父元素层级的概念，并解释了不同层级元素之间的显示规则。

对于HTML5+CSS3图层的理解

在css中对元素增加定位可以使用z-index属性设置他的层级。在层级关系中会有子元素“拼爹”的特性。
例如：

<head>
	<style>
		div{
			position:absolute;
			top:0;
			width:100px;
			height100px;
			back-groundcolor:#fff;
		}
		.boxA{z-index:2;}
		.boxB{z-index:1:}
	</style>
</head>
<body>
	<div class="boxA">
		<div class="a">
			a
		</div>
	</div>
	<div class="boxB">
		<div class="b">
			b
		</div>
	</div>

这时a时覆盖掉b的，无论如何改变b的层级，都无法使b出现在a的上面。
可以理解为该网页现在是一本书，每一张纸都是一层，而每一张纸又包含很多层，无论如何改变纸内层级，只要这张纸在另一张的下方，这张纸内的元素永远都在另一张纸内元素的下方。