html position与z-index定位学习

最新推荐文章于 2025-01-21 21:42:28 发布

原创最新推荐文章于 2025-01-21 21:42:28 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #布局 #position #z-index

本文详细介绍了CSS中的定位属性，包括相对定位(relative)、绝对定位(absolute)及固定定位(fixed)等，并通过实例展示了如何使用这些定位方式来精确控制网页元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

常用的值：

1.relative （相对定位）：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 left 位置添加 20 像素。

2.absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

3.fixed （固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

4.static （默认值）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5.inherit：规定应该从父元素继承 position 属性的值。

relative

元素会相对于它原来的位置偏移某个距离，元素原来所占的空间会被保留。

使用场合：1.元素位置微调。

2.与absolute的结合使用

absolute

1.绝对定位的元素会脱离文档流即不占据页面空间（可能压在其他元素上面），处理堆叠效果

2.绝对定位的元素会相对于离他最近的已定位的祖先元素去定位

3.如果没有没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位，比如body或者html

特点：绝对定位的元素会变成块级元素

绝对定位缘故的margin可以使用，默认情况下，auto会失效

通常情况下，relative与absolute想结合使用，祖先元素使用relative；子元素使用absolute，为子元素定位，当使用relative时，top，left，right，bottom都无得情况下，位置不变，且不脱离文本流。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位的学习</title>
		<style>
			#d1{
				width:400px;
				height:400px;
				background: red;
				position:relative; /*为祖先元素设为相对定位，不设置top等，位置不发生变化*/
				
				}
			#d2{
				width:200px;
				height:200px;
				background: yellow;
				position:absolute;/*为子元素设置绝对位置，其位置会相对祖先元素d1变化*/
				right:0;
				top: 0;
			}
			#d3{
				width:100px;
				height:100px;
				background: green;
				position: absolute;/*位置会相对祖先元素d2变化*/
				right:0;
				top:0;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				<div id="d3">
					
				</div>
			</div>
		</div>
	</body>
</html>

当子元素有俩个或多个时，子元素都会先根据其祖先元素的位置变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				width: 200px;
				height: 200px;
				background: red;
				position:relative;
			}
			#d2{
				width:100px;
				height:100px;
				background: yellow;
				position: absolute;
				top:3px;
				left:3px;
			}
			#d3{
				width:50px;
				height:50px;
				background: green;
				position:absolute;
				top:103px;
				left:103px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2"></div>
			<div id="d3"></div>
		</div>
	</body>
</html>

top、right、bottom、left的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>left、right、top、bottom</title>
		<style>
			#d1{
				width:200px;
				height:200px;
				background: red;
				margin:0 auto;
				margin-top:200px;
				line-height: 200px;
				text-align: center;
				position: relative;
			}
			#d2{
				width:100px;
				height:100px;
				position: absolute;
				top:50px;
				left:-90px;
				background: green;
			}
			#d3{
				width:100px;
				height:100px;
				position: absolute;
				top:-80px;
				left:50px;
				background: blue;
			}
			#d4{
				width:100px;
				height:100px;
				position: absolute;
				top:50px;
				right:-90px;
				background: yellow;
			}
			#d5{
				width:100px;
				height:100px;
				position: absolute;
				bottom:-90px;
				right:50px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			这是中间的div，祖先元素
			<div id="d2"></div>
			<div id="d3"></div>
			<div id="d4"></div>
			<div id="d5"></div>
		</div>
	</body>
</html>

z-index

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意：1.z-index 仅能在定位元素上奏效

2.元素可拥有负的 z-index 属性值

3.默认的堆叠顺序是后来者在上面

4.父子元素中，永远都是子压在父上，是不受z-index影响的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				width:200px;
				height: 200px;
				background: red;
				position: absolute;
                left:3px;
                top:3px;	
                	z-index:2;			
			}
			#d2{
			   width:200px;
			   height:200px;
			   background: yellow;
			   position:absolute;
			   left:50px;
			   top:50px;
			   z-index:1;
			}
			#d3{
				width:200px;
				height:200px;
				background: blue;
				position: absolute;
				left:90px;
				top:90px;
				z-index:3;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</body>
</html>