关于定位布局中的相对定位
程序员文章站
2022-04-23 23:33:14
...
关于CSS中定位布局的相对定位-relative
相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。
相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.orange{
width: 400px;
height: 300px;
background-color: orange;
}
/*红色区块设置为相对布局，虽然往下便宜150PX,但仍占据了位置，使得黄色，绿色无法浮动到最左边*/
.red{
width: 100px;
height: 100px;
background-color: red;
float: left;
position:relative;
margin-top: 150px;
}
.yellow{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.green{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
/*蓝色区块相对自身偏离了30px,10px,但黑色区块的位置是以蓝色之前的位置向下偏移10px*/
.blue{
width:50px;
height: 50px;
background-color: blue;
position: relative;
top:30px;
left:10px;
}
.black{
width:30px;
height: 30px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<p class="orange">
<p class = "red">
<p class = "blue"></p>
<p class = "black"></p>
</p>
<p class = "yellow"></p>
<p class = "green"></p>
</p>
</body>
</html>
更多关于定位布局中的相对定位 相关文章请关注PHP中文网！