이번 포스팅에서는 position:absolute 에 대하여 예제를 통하여 알아 보도록 하겠습니다.
▶ 소스
<body style="margin:0;padding:0;">
<div style="position:absolute; background-color:00D8FF;">absolute 기본예제</div>
</body>
▶ 설명
absolute 영역을 눈으로 명확하게 확인하기 위해 배경색을 설정하였습니다.
absolute 의 경우 relative 와는 다르게 width 값을 설정 하지 않을 경우 100%가 아닌 내용이 있는 위치까지만 자동 설정 됩니다.
좌표 지정 예제
▶ 소스
<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 일 경우
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>
▶ 설명
위치지정이 되어 있지 않을 경우, 먼저 선언된 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>
▶ 설명
위치를 지정하게 되면 relative 또는 absolute 값에 영향을 받지 않습니다.
텍스트가 자리하고 있을 때와 동일 합니다.
2018/03/24 - [프로그래밍/HTML, CSS, JavaScript] - [CSS] position:relative 속성 예제
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| Margin, Padding 태그를 통한 DIv 여백 설정 알아보기 (4) | 2018.04.14 |
|---|---|
| CSS hover 효과를 이용한 심플 가로 메뉴 만들기 (12) | 2018.04.06 |
| [CSS] position:relative 속성 예제 (6) | 2018.03.24 |
| CSS Position 속성 이해하기 (1) | 2018.03.22 |
| CSS를 이용한 DIV 슬라이드 효과 주기 (12) | 2018.03.13 |
