css의 position을 활용하면 일명 box라고 하는 레이아웃의 위치를 자유롭게 이동할 수 있습니다
position을 이용할 수 있는 프로퍼티가 몇 개 있습니다
relative
absolute
fixed
세 가지를 알아봅니다
relative
로얄블루색상의 박스를 만들었습니다 가로 100px, 세로 100px의 박스입니다
.box1 {
width: 100px;
height: 100px;
background-color: royalblue;
position: relative;
}여기에 relative 속성을 추가하겠습니다
실행시키게 되면 아무 일도 일어나지 않습니다 그 이유는 position속성을 움직일 명령어를 입력하지 않았기 때문입니다
position 속성들을 움직일 수 있는 명령 중 대표적으로
top, bottom, left, right가 있습니다 그럼 box를 움직일 수 있는 속성을 추가하도록 하겠습니다
.box1 {
width: 100px;
height: 100px;
background-color: royalblue;
position: relative;
top: 100px;
left: 100px;
}
로열블루 색상의 박스가 top(위에서 100px), left(왼쪽에서 100px) 떨어진 것을 확인할 수 있습니다
relative는 문서의 흐름에 따라 배치시켜줘~라는 의미를 가지고 있습니다
absolute
일반적인 문서 흐름에서 제거하고 상위 요소 중 가장 가까운 position지정 요소에 대해 오프셋을 적용시킨다입니다
오프셋이란 top오프셋 top에서 몇 px 떨어뜨려라라고 이해하시면 될 거 같습니다
<body>
<div class="box"></div>
<div class="box">
<div class="box2"></div>
</div>
</body>.box {
width: 200px;
height: 200px;
background-color: royalblue;
border: 2px solid black;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: rgb(186, 163, 48);
position: absolute;
top: 100px;
}저는 박스 두 개를 만들고 box와 두 번째 box안에 box2를 만들어 배치시켰습니다
그리고 거기에 top: 100px를 오프셋 시켰습니다
absolute는 상위 요소 부모의 요소에서의 흐름을 제거하고 이동시킵니다
box2를 두 번째 box에서 제거하고 붕 띄웠다고 생각하시면 됩니다
부모의 요소 밖에서 하늘을 날고 있는 box2라 자유롭게 이동할 수 있고
ppppp라는 텍스트를 입력하더라도 원래대로라면 문서의 흐름상 box2가 나오고 그 아래 ppppp텍스가 나오는 게 맞지만
하늘을 날고 있는 box2 때문에 ppppp가 위로 올라간 것을 확인할 수 있습니다
저는 relative로 상위 요소를 box로 지정해주었는데 box를 지정한 상위요소 relative가 없다면 브라우저를 기준을 상위 요소로 잡고 absolute가 이동하게 됩니다
fixed
.box {
width: 200px;
height: 200px;
background-color: royalblue;
border: 2px solid black;
}
.box2 {
width: 100px;
height: 100px;
position: fixed;
background-color: aqua;
}
.box3 {
width: 150px;
height: 150px;
background-color: bisque;
}fixed는 어떤 상위 요소에도 구애받지 않고 브라우저 상의 위치를 고정시킵니다
스크롤에도 영향받지 않습니다
'CSS' 카테고리의 다른 글
| [CSS] margin으로 가운데 정렬 (0) | 2022.05.24 |
|---|---|
| [CSS, HTML] display(디스플레이) inline, inline-block, block (0) | 2022.05.24 |
| [CSS] transition을 이용한 검색 창 꾸미기 (0) | 2022.02.07 |
| [CSS] position-sticky(스티키)! (0) | 2022.02.03 |
| [CSS] animation transform(트랜스폼)! (0) | 2022.02.03 |
