>  기사  >  웹 프론트엔드  >  위치 지정 레이아웃의 상대 위치 지정 정보

위치 지정 레이아웃의 상대 위치 지정 정보

高洛峰
高洛峰원래의
2017-02-18 14:27:311502검색

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


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.