Heim > Artikel > Web-Frontend > Informationen zur relativen Positionierung in Positionierungslayouts
Informationen zur relativen Positionierung in Positionierungslayouts
- 高洛峰Original
- 2017-02-18 14:27:311513Durchsuche
Informationen zur relativen Positionierung im CSS-Positionierungslayout -relative
Eines der größten Merkmale der relativen Positionierung besteht darin, dass sie nach dem Weglaufen durch die Positionierung immer noch die ursprüngliche Position einnimmt und diese nicht an den umgebenden Textfluss weitergibt . Klassenobjekt. Die relative Positionierung ist auch relativ unabhängig. Sie hat das letzte Wort darüber, was zu tun ist, und ist von ihrer eigenen Position (relativ zum Objekt selbst) versetzt.
Relative Positionierung wird oft in Kombination mit absoluter Positionierung verwendet. Im Allgemeinen wird die relative Positionierungsmethode für das übergeordnete Element festgelegt, und das untergeordnete Element kann bequem absolut relativ dazu positioniert werden
<!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>
>
Weitere verwandte Artikel zur relativen Positionierung im Positionierungslayout finden Sie auf der chinesischen PHP-Website!