CSS 定位

最新推荐文章于 2023-05-23 17:27:35 发布

原创最新推荐文章于 2023-05-23 17:27:35 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

前端之HTML CSS 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中的五种定位模型：static、relative、absolute、fixed和sticky，并通过具体示例展示了每种定位方式的特点及应用场景。

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

使用CSS定位，达到布局目的。

- position 之static

- position 之relative

- position 之absolute

- position 之fixed

- position 之sticky

position 在CSS体系中，既是一个模块，也是一个属性。

在CSS3 中一共有5中定位模型：

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{
			position: static;

			width: 50px;
			height: 50px;

			line-height: 50px;
			text-align: center;
			border:2px solid blue;
			box-sizing: border-box;
			/*margin: -1px;*/
		}
		.block:nth-child(2){/*第二个block类*/
			border:2px solid red;
		}
	</style>
</head>
<body>

	<div class="block">A</div>
	<div class="block">B</div>
	<div class="block">C</div>
	<div class="block">D</div>

</body>
</html>

特点中(1)问题，答案是：相对的是常规流中该元素的位置。

其中（4）是通过z-index，设置元素的优先顺序来展示的（z-index值越大，展示的优先级也越大）。

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{
			position: relative;
			top: 0px;
			left: 0px;

			width: 50px;
			height: 50px;

			line-height: 50px;
			text-align: center;
			border:2px solid black;
			box-sizing: border-box;
			float: left;
			z-index: 2;
			background-color: pink;
			/*margin: -1px;*/
		}
		.block:nth-child(2){
			position: relative;
			top:0px;
			left: -40px;
			border:2px solid red;
			background-color: yellow;
			z-index: 1;
		}
	</style>
</head>
<body>

	<div class="block">A</div>
	<div class="block">B</div>
	<!-- <div class="block">C</div> -->

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<meta charset="utf-8">
	<style type="text/css">
		.block{
			position: relative;
			top: 0px;
			left: 0px;

			width: 50px;
			height: 50px;

			line-height: 50px;
			text-align: center;
			border:2px solid black;
		}
		.block:nth-child(2){
			position: absolute;
			top:20px;
			left: 20px;
			border:2px solid red;
			background-color: yellow;
			z-index: 1;
		}
	</style>
</head>
<body>

	<div class="block">A</div>
	<div class="block">B</div>
	<div class="block">C</div>

</body>
</html>

与relative合用（relative定义父元素，子元素用absolute可以相对父元素定位）：

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<meta charset="utf-8">
	<style type="text/css">
		.parent{
			width: 200px;
			height: 150px;
			background: blue;
			position: relative;
		}
		.child{
			position: absolute;
			right:-80px;
			top: 0px;
			width: 80px;
			height: 80px;
			background: red;
		}
	</style>
</head>
<body>

	<div class="parent">
		<div class="child"></div>		
	</div>

</body>
</html>

特点（3）中的lrtb是指：left，right，top,bottom。
使用（3），下面展示居中效果：

<!DOCTYPE html>
<html>
<head>
	<title>position</title>
	<meta charset="utf-8">
	<style type="text/css">
		.parent{
			width: 200px;
			height: 150px;
			background: blue;
			position: relative;
		}
		.child{
			position: absolute;
			left: 0px;
			right:0px;
			top: 0px;
			bottom: 0px;
			margin: auto auto;

			width: 80px;
			height: 80px;
			background: red;
		}
	</style>
</head>
<body>

	<div class="parent">
		<div class="child"></div>		
	</div>

</body>
</html>

特点（1）答案是相对于视口（视觉窗口）不论怎么滑动页面，都会显示在可以看见的地方。

如果这样，没设置偏移量，sticky 则产生relative一样的效果：

		.nav{
			width: 100%;
			height: 40px;
			line-height: 40px;
			position:sticky;
			/*top: 0;*/
			text-align: center;
			background-color: #008B8B;
		}

当设置了偏移量后，则可以将该元素产生导航栏当不见时常驻在某位置的效果：

		.nav{
			width: 100%;
			height: 40px;
			line-height: 40px;
			position:sticky;
			top: 0;
			text-align: center;
			background-color: #008B8B;
		}

该效果如果不用CSS sticky话，可以使用javascript实现。
查看兼容性的网站： www.caniuse.com