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 중국어 웹사이트를 주목하세요!