html布局：定位position使用技巧

最新推荐文章于 2025-05-02 10:08:09 发布

Victor_Wei_H5

最新推荐文章于 2025-05-02 10:08:09 发布

阅读量2.2w

点赞数 6

分类专栏： WEB前端文章标签： html5 CSS 定位 position absoluterelativefixe

本文链接：https://blog.youkuaiyun.com/Victor_Wei_H5/article/details/53180411

版权

WEB前端专栏收录该内容

5 篇文章

订阅专栏

布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，今天我们就说说定位在布局中的使用技巧和注意事项。

position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位--相对于浏览器窗口）。

1.position:relative

生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。

2.position:absolute

absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父...)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。

	<style type="text/css">
			#box {
				background-color: grey;
				position: relative;
				padding: 20px;
			}
			
			#child {
				height: 200px;
				width: 200px;
				background: red;
				position: absolute;
				left: 100px;
				top: 100px;
			}
		</style>
	</head>

	<body>
			<div id="box">
				<span id="child">
					hello world
				</span>

			</div>
	</body>

可以看到在对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；

3.position:fixed

fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。

z-index属性：

使用定位后的元素都会有z-index属性，同级定位元素这个值越大，其显示越靠前。这项属性需要注意的是比较时是同级定位元素进行比较。

		<style type="text/css">
			#box {
				height: 400px;
				width: 400px;
				background-color: grey;
				position: absolute;
				z-index: 1;
			}
			
			#child {
				height: 50%;
				width: 50%;
				background: red;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
			}
			#box2{
				position: absolute;
				height: 200px;
				width: 200px;
				background: green;
				z-index: 2;
			}
			#child2{
				height: 50%;
				width: 50%;
				background: yellow;
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 8;

			}
		</style>
	</head>

	<body>
			<div id="box">
				<div id="child">

				</div>

			</div>
			<div id="box2">
				<div id="child2">
					
				</div>
			</div>

	</body>