position은 요소의 위치를 조정하기 위해서 사용된다. 원래 배치되기로 한 곳에서 조금 조정하거나 특정한 방식으로 찾은 부모 요소를 기준으로 배치를 하거나 하는 것이다.
position 사용시 z-index이라는 z축에 우선순위를 주는 속성이 있다. 한글 프로그램에서 그림이 여러 개 겹쳐있을 때 '맨 앞으로' 같은 것을 생각하면 쉽다. position을 사용하면 같은 영역안에서 다른 박스와 겹치는 부분이 생길 수 있으므로 주의해야한다. 즉, 여러 겹의 레이어가 쌓이는 상황이 발생한다.
각 속성값을 보면서 활용방법을 생각해보면 유용할 것이다.
static
default 값이다. 즉, 모든 요소는 static이 기본 값으로서 inline, block 박스들이 나열되는 방법들을 잘 알고 있으면 된다. inline은 horizontal 배치고 box는 vertical 배치인 것을 기억하면 된다.
relative
static 방식에서 상대적인 위치를 조정하는 방식이다. 즉, 원래 예정이었던 위치를 기준으로 조정하는 방식이다. 만약 top: 10px을 준다면 기본으로 위치될 곳에서 아래로 10px 위치한다.
top과 bottom 중에 하나를 선택할 수 있고 left와 right 중에 하나를 선택할 수 있다. 같이 써도 syntax 상 에러는 없지만 semantic이 잘 못된다. 테스트 해보았을 때 동시에 쓰면 bottom보다 top이 우선순위가 높았다.
absolute
relative가 static인 상태를 기준으로 움직였다면, absolute는 position: relative 속성을 가지고 있는 가장 가까운 조상이 기준이 된다. 만약 조상 중에 포지션이 relative인 태그가 없다면 body가 기준이 된다.
주의할 점은 absolute를 시키고 나면 콘텐츠에 딱 fit한 크기만을 사용한다. 아래 예시를 보면 d가 차지하는 공간이 width:100%가 아님을 알 수 있다. 또한 기준이 되는 부모 태그의 컨텐츠가 다 작성되고 나서 이어서 요소가 배치된다. float: left처럼 무조건 구석부터 배치가 되는 것이 아니라는 뜻이다.
width가 컨텐츠 외에 여유 공간을 차지하려면 width, hegith를 명시적으로 지정해주면 된다.
예시)
<div id="c">cccccccccccc<br><br><br>
<div id="d">dddddddd</div>
</div>
#c{ positon: relative}
#d{position: absolute}
#c{width:1000px; height:100px}
#d는 #c를 기준으로 배치가 되나 float:left처럼 부모요소의 컨텐츠 부분을 덮어쓰지는 않는다. 따라서 #d가 #c의 좌상단부터 시작하려면 #c의 내용이 다음처럼 없어야 한다.
<div id="c">
<div id="d">dddddddd</div>
</div>
fixed
fixed는 absolute과 유사한 점이 많다. absolute는 position속성이 relative인 가장 가까운 조상 태그를 찾아서 그 태그를 기준으로 배치된다고 설명하였다. fixed는 그 조상이 body이다. relative가 있는 조상이 body 이전에 있는 것과 상관없이 body가 기준이다. 그렇기 때문에 body를 기준으로 배치되는 absolute와 같은 stacking context를 가진다. 따라서 z-index로 조절하여 fixed인 태그와 body 기준인 absolute 태그 사이의 context change가 가능하다.
테스트하는 방법은 body 밑에 여러개의 div 태그를 형제로 만든 후 fixed, absolute를 다양하게 적용하면 같은 위치에 배치되는 것을 확인할 수 있다. 아래와 같은 구조이다.
<body>
<div style="position: fixed"></div>
<div style="position: absolute"></div>
<div style="position: absolute"></div>
<div style="position: fixed"></div>
</body>
css position관련 설명(absolute 설명에 잘못된 설명이 존재하니 주의해서 보시길)
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
'웹(web) > 프론트엔드-css' 카테고리의 다른 글
| CSS hover transition event (0) | 2020.05.12 |
|---|---|
| CSS drop down menu (0) | 2020.05.12 |
| CSS text-overflow(텍스트 잘리는 부분 처리) (0) | 2020.05.08 |
| CSS Text 관련 속성 (0) | 2020.05.06 |
| CSS Box align, content align (0) | 2020.05.06 |
