본문 바로가기
개발자 꿈나무/CSS

CSS position 속성으로 div 위에 div 겹치기

by ♥︎♥︎ Heina ♥︎♥︎ 2020. 9. 4.
반응형

기획전 페이지 퍼블리싱을 해 두었는데 일부 기획전에 마감 처리를 해야 해서 div 위에 div를 겹쳐 올리는 방식으로 기획전 조기 마감을 표현했다. CSS position 속성을 이용하면 손쉽게 div 위에 div를 겹쳐 보이게 할 수 있다. 기본 원리는 아래와 같다. 

<div style="position:relative'">
  <div style="position:absolute; top:100px; left:100px">
  </div>
<div>

이제부터 아래 깔리는 div를 부모 div 라고 하고 위에 올라가는 div를 자식 div 라고 지칭하겠다. 부모 div에 position:relative; 속성을 주고 자식 div에 position:absolute; 속성을 주는 방법이다. 활용해 보자!

 


DIV 위에 DIV 겹치기 활용 예제 

부모 div 안에는 "안녕 친구하지 않을래" 라는 텍스트가 있고, 자식 div 안에는 "그래 친구하자" 라는 텍스트가 있다. 경계를 확인하기 위해 부모 div 에는 아쿠아 배경색상과 검정 테두리를 주었다. 자식 div의 경계는 블루 바이올렛 배경 색상으로 알 수 있으며, 투명도를 주어 글씨가 겹치는 부분을 확인할 수 있도록 하였다.

 <!-- 부모 div -->
    <div style="position:relative;height:100px;border:1px solid black;background-color:aqua;">

        <!-- 자식 div -->
        <div style="position:absolute;background-color:blueviolet;opacity:0.7;">
        <p>그래 친구하자</p>
        </div>

        <p style="color:black;"> 안녕 친구하지 않을래 </p>  

    </div>

 

각각 position 태그 속성을 relative와 absolute로 주면 아래와 같이 글씨가 겹치는 것을 확인할 수 있다.

나는 부모 div 테두리에서 일정 간격을 유지한 채로 자식 div가 보여지길 원했다. 부모 div에 padding 태그를 사용하여 내부 여백을 설정했다. 그리고 새로운 div를 만들어서 position:relative; 를 이동시켰다. 새롭게 부모가 된 div의 경계는 붉은색 테두리로 확인할 수 있다.

<!-- 원래 부모였던 div -->
    <div style="padding:10px;height:100px;border:1px solid black;background-color:aqua;">
        
        <!-- 새롭게 부모가 된 div -->
        <div style="position:relative;border:1px solid red;width:100%;height:100%;">

        <!-- 자식 div -->
        <div style="position:absolute;background-color:blueviolet;opacity:0.7;width:100%;height:100%;">
        <p>그래 친구하자</p>
        </div>

        <p style="color:black;"> 안녕 친구하지 않을래 </p>   

        </div>  
 
    </div>

아래와 같은 디자인(?)이 완성 되었다. 

새로운 부모 div를 만든 이유는 기존의 부모 div가 가지는 padding을 인식하게 하기 위해서다. CSS position relative 와 absolute 속성을 이용하면 손쉽고 빠르게 div 위에 div를 올릴 수 있으니 정말 유용하다. 앞으로도 자주 이용할 것 같은 느낌적 느낌(!)이 든다.

반응형

댓글0