CSS:z-index空间位置

最新推荐文章于 2022-08-31 17:27:54 发布

203最强

最新推荐文章于 2022-08-31 17:27:54 发布

阅读量375

点赞数

分类专栏： CSS页面布局及排版文章标签： css z-index

本文链接：https://blog.csdn.net/qq_36689512/article/details/53862371

版权

CSS页面布局及排版专栏收录该内容

4 篇文章 0 订阅

订阅专栏

z-index空间位置

当元素被设置了position属性时,可能会使得元素产生重叠，可以利用z-index属性调整元素上下位置，值大的元素位于值小的上方。默认的z-index属性值为0，可以是正数，也可以是负数，当两个元素的值一样时，则保持原有的上下覆盖关系。以下是z-index的属性值：

①auto：默认。堆叠顺序与父元素相等。

②number：设置元素的堆叠顺序。

③inherit：规定应该从父元素继承 z-index 属性的值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）以下是它的实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img.x{
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: -1;
			}
			p.y{position: absolute;
				left: 0px;
				top: 0px;
				z-index: 1;}
		</style>
	</head>
	<body>
	    <h1>这是一个标题</h1>
		<img src="img/1.jpg" width="500px" class="x" alt="">
		<p class="y"><b>你看见了没aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</b></p> 	
	</body>
</html>