CSS의 상대 위치 지정이란 무엇입니까?-CSS 튜토리얼-php.cn

CSS의 상대 위치 지정이란 무엇입니까?

WBOY

풀어 주다： 2024-02-23 11:39:04

원래의

1083명이 탐색했습니다.

CSS의 상대 위치 지정이란 무엇입니까?

CSS 상대 위치 지정은 요소가 원래 위치를 기준으로 위치가 지정되며 이동된 위치가 다른 요소의 레이아웃에 영향을 미치지 않음을 의미합니다.

상대 위치 지정의 특징은 문서 흐름을 벗어나거나 다른 요소의 레이아웃에 영향을 주지 않고 요소가 원래 공간을 계속 점유한다는 것입니다. 위치 지정은 요소 자체를 기준으로 계산되며 요소의 위치는 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 통해 지정할 수 있습니다.

다음은 구체적인 코드 예시입니다:

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: lightgrey;
    }
    
    .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: red;
        top: 50px;
        left: 50px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="box"></div>
</div>

</body>
</html>

로그인 후 복사

위 예시에서는 배경색이 연한 회색인 너비 300px, 높이 300px의 컨테이너를 만들었습니다. 그런 다음 컨테이너 내부에 너비 100px, 높이 100px의 배경색이 빨간색인 상자가 생성됩니다. position:relative 속성을 상자에 추가하여 상자를 상대 위치로 설정합니다.

다음으로 상단: 50px 및 왼쪽: 50px 속성을 사용하여 상자를 아래로 50px 이동하고 오른쪽으로 이동합니다. 그러면 상자가 원래 위치를 기준으로 오른쪽 아래로 이동됩니다.

상대 위치 이동은 요소 자체를 기준으로 하므로 상자가 이동하더라도 여전히 원래 위치를 차지한다는 점에 유의해야 합니다. 다른 요소는 영향을 받지 않으며 레이아웃 변경도 발생하지 않습니다.

요약하자면, 상대 위치 지정은 원래 위치를 기준으로 위치를 지정하는 방법으로, 이동된 위치는 다른 요소의 레이아웃에 영향을 주지 않습니다. 요소의 위치는 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 통해 제어할 수 있습니다.

위 내용은 CSS의 상대 위치 지정이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!