본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[CSS] position:absolute 속성 예제

by [바가지] 2018. 3. 28.

position:absolute

 

이번 포스팅에서는 position:absolute 에 대하여 예제를 통하여 알아 보도록 하겠습니다.

 

기본예제

  

▶ 소스 

<body style="margin:0;padding:0;">
  <div style="position:absolute; background-color:00D8FF;">absolute 기본예제</div>
</body>

 

▶ 설명

absolute 영역을 눈으로 명확하게 확인하기 위해 배경색을 설정하였습니다.

absolute 의 경우 relative 와는 다르게 width 값을 설정 하지 않을 경우 100%가 아닌 내용이 있는 위치까지만 자동 설정 됩니다.

 

absolute 기본예제

 

 

좌표 지정 예제

  

▶ 소스 

<body style="margin:0;padding:0;">
  <div style="position:absolute; top:20px; left:20px; background-color:00D8FF;">기준div</div>
</body>

 

▶ 설명

좌표지정 속성을 통해 위치를 설정 할 수 있습니다.

top:20px 설정으로 상단에서 20px 아래, left:20px 설정으로 왼쪽에서 20px 떨어져서 위치하게 됩니다.

 

 

좌표지정예제

 

 

 텍스트가 자리하고 있는 경우 예제

  

▶ 소스 

</body>
  텍스트가 자리하고 있을 경우?
  <div style="position:absolute; top:20px; left:20px; background-color:00D8FF;">기준div</div>
</body>

 

▶ 설명

만약 top과 left 속성을 지정하지 않을 경우는 텍스트 내용 아래에 div가 표시 됩니다.

그러나 이 예제처럼 top과 left 속성이 지정되어 있는 경우, 텍스트에 영향을 미치지 않고 body의 상단과 body의 좌측이 기준이 되어 이동하여 위치하게 됩니다. 20px라서 명확하게 표시가 되지 않아 5px로 설정을 하여

확인을 해 보도록 하겠습니다.

 

※ top:20px; left:20px 일 경우

텍스트가 자리하는 경우

 

※ top:5px; left:5px 일 경우

텍스트가 자리하는 경우2

 

중요 : 위치지정과 상위 설정 div에 따른 4가지 경우

 

case1. 위치지정이 되어 있지 않고, 위에 relative 값의 div가 있는 경우

case2. 위치지정이 되어 있지 않고, 위에 absolute 값의 div가 있는 경우

case3. 위치지정이 되어 있고, 위에 relative 값의 div가 있는 경우

case4. 위치지정이 되어 있고, 위에 absolute 값의 div가 있는 경우

 

▶ 소스  

case1

<div style="position:relative;  background-color:FFBB00;">상위div</div>

<div style="position:absolute;  background-color:00D8FF;">기준div</div>

case2

<div style="position:absolute;  background-color:FFBB00;">상위div 영역 입니다.</div>

<div style="position:absolute;  background-color:00D8FF;">기준div</div>

 

case1   case2

▶ 설명

위치지정이 되어 있지 않을 경우, 먼저 선언된 div 의 속성이 relative의 경우 자리를 차지하게 됩니다.

그러나 absolute의 경우는 자리를 차지하고 있지 않게되어 겹치는 현상이 발생하게 됩니다.

이렇게 겹치는 경우는 z-index 속성을 이용하여 겹치는 우선순위를 설정 할 수 있습니다.

 

▶ 소스 

case3

<div style="position:relative;  background-color:FFBB00;">상위div 영역 입니다.</div>

<div style="position:absolute; top:10px; left:10px; background-color:00D8FF;">기준div</div>

case4

<div style="position:absolute;  background-color:FFBB00;">상위div 영역 입니다.</div>

<div style="position:absolute; top:10px; left:10px; background-color:00D8FF;">기준div</div>

 

case3   case4

 

▶ 설명

위치를 지정하게 되면 relative 또는 absolute 값에 영향을 받지 않습니다.

텍스트가 자리하고 있을 때와 동일 합니다. 

 

 

반응형

댓글0