前端笔记19——CSS相对定位

最新推荐文章于 2024-10-07 20:01:49 发布

原创最新推荐文章于 2024-10-07 20:01:49 发布 · 164 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #相对定位 #定位 #position：relative

前端专栏收录该内容

93 篇文章

订阅专栏

本文深入讲解了CSS中相对定位的使用方法，通过具体代码实例展示了如何利用position: relative属性进行元素定位，包括如何设定水平和垂直偏移量。

前言

在使用CSS样式开发的时候，我们肯定要用到定位属性。这里给大家分享我学习到了关于相对定位使用。

相对定位

相对定位使用的是position：relative属性。定位需要一个参照物：根据谁来做这个定位的？

参照就是：在没有使用定位之前自身的初始位置

代码实例

只要复制下面的代码，就可以看到相对定位的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				background-color: red;
				position: relative;
				/*左边的偏移量，以左边为基准偏移100像素*/
				left: 100px;
				/*上边的偏移量，以上边为基准偏移100像素*/
				top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>