css 相对定位 position relative_css position: relative 坐标系-CSDN博客

css 相对定位

这里相对的意思是，相对于一个元素没有定位前显示的位置，也就是原来显示的位置，

这个需要注意；

下面分两个部分来看相对定位：

第一部分：如何实现相对定位？

代码（1）：没有加定位的情况下

<!doctype html>
<html>
<head>
<meta 
charset="utf-8">
<title></title>
<style>
*{margin:0;padding:0;}
.abc{width:200px;height:200px;background-color:red;}
</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>

代码（2）:添加相对定位

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title></title>
<style>
*{margin:0;padding:0;}
.abc{width:200px;height:200px;background-color:red;
position:relative; top:100px; left:100px;}
</style>
</head>
<body>
<divclass="abc"></div>
</body>
</html>


两次显示效果对比：




相对定位相对的是原先的位置