CSS : absolute position

CSS : absolute position

2025. 2. 15. 13:29ㆍStyle/CSS

position

CSS에서 position 속성은 요소를 화면에 어떻게 배치할 지를 결정한다.

기본값 : static
변경값 : relative, absolute, fixed

position으로 속성 요소를 위치시키는 방법을 지정하고,

포지셔닝 관련 속성인 top, left, bottom, right 등을 사용하여 요소의 offset을 지정할 수 있다.

absolute의 특징

부모 요소에 속박되지 않음
요소를 화면상 원하는 위치에 자유롭게 배치시킬 수 있음
상위 요소가 relative라면, 해당 요소의 내부에서 동작함

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="ex.css" type="text/css" />
    </head>
    <body>
        <div class="parent">
            parent
            <div class="child">child 1</div> 
            <div class="child">child 2</div>
            <div class="child_abs">child 3</div>
        </div>
    </body>
</html>

.parent{
    border: 2px solid blue;
    color: blue;
    background-color: lightblue;
    padding:1rem;
}

.child{
    border: 2px solid red;
    color: red;
    background-color: lightcoral;
    padding: 1rem;
}

.child_abs{
    position: absolute;
    border: 2px solid green;
    color: green;
    background-color: lightgreen;
    padding: 2rem;
}

absolute 속성이 적용되지 않은 child 클래스를 가진 child1, 2는 부모 요소에 종속되지만,

absolute 속성을 가진 child_abs를 가진 child 3는 부모 요소에 종속되지 않은 것을 확인할 수 있다.

이 때 child 3가 화면에 대해서가 아닌 parent에 대해 정렬된 이유는

offset 속성을 명시하지 않으면 기본값인 auto가 적용되는데,

이 offset auto값이 position 속성이 static일 때의 위치와 일치하기 때문이다.

child_abs의 top과 left를 0, 0으로 offset을 지정하면 브라우저 화면에 대해 0, 0 지점에 위치한다.

또한 parent에 relative 값을 지정하면 child_abs의 positioning context가 전체화면(viewport)에서 부모 요소로 변경되어

위치가 지정됨을 확인할 수 있다.

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

CSS : display와 float (0)	2025.07.28
CSS : 박스 모델 (Box Model) (1)	2025.07.28
CSS : 텍스트 스타일링 속성들 (3)	2025.07.28
CSS 단위 총정리 : 색상, 크기, 시간, 각도 (5)	2025.07.28
CSS 1 : CSS 기본 개념 (1)	2025.01.23

🥔 감자의 오묘한 개발 🥔

🥔 감자의 오묘한 개발 🥔

태그

최근글

댓글

공지사항

아카이브

position

absolute의 특징

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

관련글

티스토리툴바