CSS에서 위치 속성의 사용법은 무엇입니까-CSS 튜토리얼-php.cn

CSS에서 위치 속성의 사용법은 무엇입니까

coldplay.xixi

풀어 주다： 2023-01-03 09:30:50

원래의

5268명이 탐색했습니다.

CSS에서 위치 속성 사용: 1. 위치 지정 속성이 없는 일반 레이블 요소는 정적 위치 지정입니다. 2. 절대 위치 지정 요소는 문서 흐름에서 드래그됩니다. 3. 상대적으로 위치 지정되는 요소는 쌓일 수 없습니다. 절대 위치 지정과 유사하지만 브라우저 창을 기준으로 위치가 지정되며 스크롤 막대와 함께 스크롤되지 않습니다.

CSS에서 위치 속성의 사용법은 무엇입니까

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS에서 위치 속성 사용:

1. 정적 위치 지정(정적)

위치 지정 속성이 없는 일반 레이블 요소는 정적 위치 지정이며 페이지 하단의 표준 흐름에 속합니다.

2. 절대 위치 지정(absolute)

절대 위치에 있는 요소를 문서 흐름 밖으로 드래그하고 왼쪽, 오른쪽, 위쪽, 아래쪽 등의 속성을 사용하여 가장 가까운 상위 요소를 기준으로 위치를 지정합니다. 대부분의 위치 지정 설정은 절대 위치 지정이며, 요소의 상위 요소가 위치 지정 속성을 설정하지 않은 경우 본문 요소의 왼쪽 상단을 기준으로 위치가 지정됩니다. 절대 위치에 있는 요소는 쌓을 수 있으며, z-index 속성을 통해 쌓는 순서를 제어할 수 있습니다. z-index 값은 단위가 없는 정수로, 큰 것이 맨 위에 오며 음수 값을 가질 수 있습니다.

절대 위치 지정 위치 지정 방법:

부모 요소가 위치:상대 또는 위치:절대 및 위치:고정과 같이 정적 이외의 위치 지정을 설정하는 경우 위치는 부모 요소를 기준으로 지정됩니다.

상위 요소에 위치 설정이 설정되어 있지 않으면 상위 요소의 상위 요소에 위치 설정이 설정되어 있는지 확인해야 합니다.

아직 설정되지 않은 경우 계속 진행하세요. 즉, 조상 요소와 유사하게 위치 지정은 정적 위치 지정 이외의 위치 지정이 있는 첫 번째 조상 요소를 기준으로 합니다.

모든 조상 요소에 위의 세 가지 위치 지정 중 하나가 없으면 해당 위치가 지정됩니다. 이는 문서 본문을 기준으로 위치가 지정됩니다(창을 기준으로 고정되는 브라우저 창을 기준으로 하는 것이 아님).

<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box  two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>

로그인 후 복사

class="two"로 div를 위쪽에서 50px, 왼쪽에서 50px 위치에 배치합니다. 다른 요소의 레이아웃이 변경되고 이 요소의 원래 위치에 공백이 남지 않습니다.

3. 상대 위치 지정(상대적)

상대적으로 배치된 요소는 쌓일 수 없으며 왼쪽, 오른쪽, 위쪽, 아래쪽 및 기타 속성을 기반으로 일반 문서 흐름에서 해당 위치를 오프셋할 수 있습니다. Z-색인 계층적 디자인을 사용할 수도 있습니다.

<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box  two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>

로그인 후 복사

원래 위치에서 왼쪽 상단에서 class="two" 50px 떨어진 곳에 div를 배치하세요. 다른 요소의 레이아웃은 변경되지 않지만 이 요소의 원래 위치에 빈 공간이 남습니다.

4. 고정 위치 지정(fixed)

고정 위치 지정은 절대 위치 지정과 유사하지만 브라우저 창을 기준으로 위치가 지정되며 스크롤 막대로 스크롤되지 않습니다.

고정 위치 지정의 가장 일반적인 용도 중 하나는 여백, 테두리 또는 패딩을 사용하지 않고 페이지에 고정 머리글, 고정 바닥글 또는 고정 사이드바를 만드는 것입니다.