[CSS] div겹치기

div태그는 대표적인  block 속성을 가지고 있다. 

grid나 flex 또는 float 속성으로 div를 한줄에 배치할 수도 있지만 그런 설정말고 div자체를 겹쳐야하는 방법을 찾아보았다.

겹치는 것에도 부모태그안의 div를 부모와 겹치게 하는 것도 있고,

각각의  div 태그를 겹쳐야 하는 경우도 있는데, 나의 경우엔 후자이다.

<style>
    .tabSelect { position: absolute; top:7.5rem;}
</style>

 

position : absolute 로 설정하면 다른 어떤 것들에도 구애받지 않고 위치를 설정해 줄 수 있다.

top, bottom, left, right  방향으로 절대적인 위치를 설정해주면 그 위치에 배치할 수 있다.

부모요소를 기준으로 설정이 되지만 부모요소가 없다면  body태그 기준이라는 것도 알아두자.

만약에 다른 요소와 겹쳐서 보이지 않는 경우에는  z-index 를 사용해보자.