본문 바로가기
Web/CSS

CSS 위치속성

by chaen98 2021. 8. 11.
반응형

 

position 속성

HTML 요소의 위치 설정을 지정하는 스타일 속성

속성값 설명
static(기본값) 요소를 문서의 일반적인 흐름에 따라 배치하도록 설정
relative 요소를 문서의 일반적인 흐름에 따라 배치하고, 요소의 영역을 기준으로
top, right, bottom, lefe 스타일 속성의 값에 따라 오프셋을 적용하도록 설정 
absolute 요소를 문서의 일반적인 흐름에서 제거하고, 조상 요소 중에
가장 가까운 위치 지정 요소를 기준으로 배치하도록 설정
(조상 요소 중 위치 지정 요소가 없는 경우, 초기 컨테이닝 블록을 기준으로 배치)
fixed 요소를 문서의 일반적인 흐름에서 제거하고, 브라우저 화면을 기준으로 배치하도록 설정

 

HTML 요소의 배치방법

1. HTML 요소의 배치 : 기본적인 HTML 요소는 HTML 문서의 일반적인 흐름에 따라서 순서대로 배치

2. 상대적인 위치 : 요소가 문서의 일반적인 흐름에 따라 배치됐을 때의 영역을 기준으로 상대적인 위치에 배치

3. 절대적인 위치 : 요소를 문서의 일반적인 흐름에서 제거하고, 특정 영역을 기준으로 배치


위치 지정 요소와 절대 위치 지정 요소
1. 위치 지정 요소 : position 스타일 속성의 값이 relative, absolute, fixed 중 하나인 요소
   (즉, position 스타일 속성의 값이 static이 아닌 요소)

2. 절대 위치 지정 요소 : position 스타일 속성의 값이 absolute, fixed 중 하나인 요소
   (이 요소는 문서의 일반적인 흐름에서 제거되므로, 부모 요소의 컨텐츠로 인식되지 않는다)


컨테이닝 블록 : 요소의 크기나 위치는 컨테이닝 블록에 영향을 받으며, position 스타일 속성의 값에 따라 요소의 컨테이닝 블록이 달라진다.

속성 값 설명
static, relative 그 요소와 가장 가까운 블록 레벨 조상 요소의 콘텐츠 영역(content-box)
absolute 조상 요소 중 가장 가까운 위치 지정 요소의 padding을 포함하는 영역이거나 조상 요소 중 위치 지정 요소가 없는 경우 초기 컨테이닝 블록
fixed 브라우저 화면(viewport)

* 블록 레벨 요소는 display 스타일 속성의 값이 block, inline-block, list-item, table 등인 요소를 말한다
* 최상위 요소의 컨테이닝 블록은 초기 컨테이닝 또는 초기 컨테이닝 블록으로 부르는 사각형이다.
* 초기 컨테이닝 블록은 일반적으로 브라우저 화면이 된다. 

 

 

기준 영역

위치 지정 요소가 배치될 때 기준으로 삼는 영역을 말하며, position 스타일 속성의 값에 따라 요소의 기준 영역이 달라진다

속성 값 설명
relative 요소가 문서의 일반적인 흐름에 따라 배치됐을 때의 영역
absolute, fixed 컨테이능 블록

* position 스타일 속성의 값이 static인 경우에는 top, bottom, left, z-index 스타일 속성에 영향을 받지 않는다.

 

 

 

top, right, left, bottom 속성

기준 영역과 요소 사이의 간격을 설정

 

속성 값 설명
auto (기본값) 상황에 따라 브라우저가 계산해서 설정
Length 크기 단위를 사용해서 설정
percentage 컨테이닝 블록 크기의 백분율로 설정

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css position</title>
        <style>
            #container {
                box-sizing: border-box;
                background-color: #efe;
                width: 1000px;
                height: 400px;
                border: 3px solid green;
 
           	position: relative;
            }
 
            #container > div {
                position: absolute;
 
                box-sizing: border-box;
                width: 200px;
                height: 100px;
                background-color: #fee;
                border: 3px solid red;
                text-align: center;
                line-height: 100px;
            }
 
            .box:nth-child(1) {
                left: 10px;
                top: 10px;
            }
 
            .box:nth-child(2) {
                right: 10px;
                top: 10px;
            }
 
 
            .box:nth-child(3) {
                left: 10px;
                bottom: 10px;
            }
 
            .box:nth-child(4) {
                right: 10px;
                bottom: 10px;
            }
 
        </style>
    </head>
    <body>
        <div id="container">
            <div class="box">Box 1</div>
            <div class="box">Box 2</div>
            <div class="box">Box 3</div>
            <div class="box">Box 4</div>
        </div>
    </body>
</html>

실행결과

positon 예제

 

▼ 소스코드 살펴보기

14 : div 요소들이 #container의 영역을 기준으로 배치 대도록 position 설정

18 : #container 요소의 영역을 기준으로 배치

      (containing block : 조상 요소 중 가장 가까운 위치 지정 요소의 padding-box →container 요소의 padding-box)

 

 

 

 

궁금하신 점이나 이해하기 어려운 부분은

댓글로 달아주시면 제가 친절하고 아는 선에서 알려드릴게요^^

 

 

 

 

 

 

댓글과 하트는 저에게 많은 힘이 됩니다 :)

 

반응형
저작자표시

'Web > CSS' 카테고리의 다른 글

CSS float 속성  (0) 2021.08.23
CSS 목록속성과 그림자 속성  (0) 2021.08.06
CSS 문단 속성  (0) 2021.07.15
CSS 글자속성  (3) 2021.06.11
CSS 배경속성  (0) 2021.04.22

관련글

댓글

티스토리툴바