CSS定位

最新推荐文章于 2025-05-25 18:34:15 发布

满分观察网友z

最新推荐文章于 2025-05-25 18:34:15 发布

阅读量1.5k

点赞数 25

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/dongxiaod1/article/details/136021963

CSS（入门）专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS中的四种定位方式：相对定位、绝对定位、固定定位以及如何使用定位实现居中效果。同时讨论了定位层级的重要性，通过z-index控制元素在页面上的显示顺序。

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

CSS定位

我们今天来学习CSS的定位，可以通过CSS 中的 position 属性用来设置元素在页面中的位置。

1. 相对定位

相对定位，即相对于自己原来的位置进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。

给元素设置 position:relative 即可实现相对定位。

1.1 代码演示

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>相对定位</title>
		<style>
			div {
				width: 500px;
				height: 500px;
				border: 1px solid #000;
			}
			.relative {
				width: 100px;
				height: 100px;
				position: relative;
				left: 50px;
				top: 50px;
				background-color: pink;
			}
			p {
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="relative"></div>
			<p></p>
		</div>
	</body>
</html>

1.2 演示效果

我们给粉色的方块设置绝对定位，可以看到它的位置是相对原来的位置来定位的。

QQ录屏20240204102436 -original-original

2. 绝对定位

绝对定位，根据它的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会找第一个拥有定位属性的祖先，最后是整个页面。

给元素设置 position: absolute 即可实现绝对定位。

2.1 代码演示

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>绝对定位</title>
		<style>
			div {
				width: 600px;
				height: 200px;
				border: 1px solid #000;
				position: relative;
			}
			.absolute {
				width: 100px;
				height: 100px;
				position: absolute;
				right: 5px;
				bottom: 10px;
				background-color: pink;
			}
			p {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="absolute"></div>
			<p></p>
		</div>
	</body>
</html>

2.2 演示效果

QQ录屏20240204103510 -original-original

3. 固定定位

固定定位，参考它的视口进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。

给元素设置 position: fixed 即可实现固定定位。

3.1 代码演示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>固定定位</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			.icon {
				position: fixed;
				width: 40px;
				height: 40px;
				border: 1px solid #ccc;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				bottom: 100px;
				right: 70px;
				box-shadow: 0px 0px 9px #b9bcbc;
			}

			.icon > img {
				width: 28px;
				height: 28px;
			}

			.wrapper {
				height: 1000px;
			}
		</style>
	</head>
	<body>
		<div class="icon">
			<img
				src="https://mdn.alipayobjects.com/huamei_0prmtq/afts/img/A*SSJmRaVNucQAAAAAAAAAAAAADvuFAQ/original"
			/>
		</div>
		<div class="wrapper"></div>
	</body>
</html>

3.2 实现效果

我们可以看到客服的图标一直在我们的视图中，固定在屏幕上。

QQ录屏20240204104137 -original-original

4. 使用定位居中

我们可以使用定位进行居中，配合translate可以改变元素的位置，以下是居中的代码。

4.1 代码演示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>使用定位居中</title>
		<style>
			.big-box {
				position: relative;
				margin: auto;
				width: 500px;
				height: 500px;
				border: 1px solid #ccc;
			}

			.small-box {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 200px;
				height: 200px;
				/* translate可以改变元素的位置 */
				/* 50%代表，相对于元素本身的宽度，改变位置 */
				/*translate两个参数，x和y */
				/*单独改x translateX */
				/*单独改y translateY */
				transform: translate(-50%, -50%);
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		<div class="big-box">
			<div class="small-box"></div>
		</div>
	</body>
</html>