[CSS] position 속성

Jan 15, 2024

Contents

1) static 2) relative 3) absoulte 속성 4) fixed 속성

은 네개가 있씁니다. 알아봅시다

1) static

기본적으로 position 속성은 static입니다.

일반적인 문서의 흐름에 따라 배치됩니다. (요소는 다른 요소들과 상대적인 위치에 따라 자연스래 배치됩니다.

2) relative

relative 속성은 요소의 위치를 상대적으로 조정하는 데 사용됩니다. - margin, padding은 외부/내부 공간을 조정하지만, left, right, top, bottom 속성을 이용하여 요소를 이동시킬 수 있습니다.


.box2 {
						...
            position: relative;
            top: 100px;
            left: 100px;
        }

이전 요소(노랑빡쓰)를 기준으로 움직였습니다.

3) absoulte 속성

absoulte속성은 요소의 위치를 절대적으로 조정합니다. ※position: absoulte;로 설정된 요소는 상위 요소 중에서 가장 가까운 position: relative;를 기준으로 배치합니다. 없다면 <body>를 기준. - 다른 요소들과 겹칠 수 있고, 특정 위치에 요소를 고정할 수도 있습니다.


.box5 {
            ...
            position: absolute;
            top: 50px;
            left: 50px;
        }

box5의 상위에는 box4가있지만, position: relative;를 설정하지 않았다. 때문에 body를 기준으로 위치가 설정되었다.

4) fixed 속성

browser를 기준으로 위치 고정입니다.

스크롤을 움직였지만 브라우저에 고정되어 있습니다.

See more posts

[CSS] position 속성

1) static

2) relative

3) absoulte 속성

4) fixed 속성

More articles

[HTML,CSS] 웹 페이지 만들어 보기

[CSS] 속성 공부

[CSS] CSS를 HTML에 적용하는 법

[CSS] CSS의 구조