조회 수 19672 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

position: absolute에 대해 알아보자.

 

absolute는 기본적으로 화면의 좌측상단을 기준으로 거리를 계산한다. 만약 부모요소가 있을 시 부모요소의 좌측 상단을 기준으로 거리를 계산해 낸다.

그러나, 이것말고 알아야 되는 것이 더 있다.

 

인터넷상의 많은 자료들을 살펴보면 부모요소중 가장 가까운 relative속성을 기준으로 영역을 산출한다는 설명이 가장 많다. 이 것은 잘못된 정보이다. 부모요소가 relative든  absolute든 실제로는 아무 부모의 요소로부터 거리를 산출해 낸다.

 

일단, 아래의 예를 살펴보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.common {
    width: 100px;
    height: 100px;
}
.parent {
    position: relative;
    top: 10px;
    left: 10px;
    border:1px solid blue;
}
.son_1 {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid red;
}
</style>

<div class="common parent">
    부모영역
    <div class="common son_1">자식영역</div>
</div>

 

10-1.png

 

위의 실행결과를 알아보자. 부모 DIV에 relative를 주고 자식DIV에 absolute를 주었다. 인터넷상의 설명대로 relative를 기준으로 상하 10px씩 위치가 변경됨을 알 수 있다.

 

그럼 부모에 absolute를 주면 위치의 변동이 일어날까? 자식DIV의 부모가 화면의 첫시작점을 기준으로 변동이 일어나는지 알아보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.common {
    width: 100px;
    height: 100px;
}
.parent {
    position: absolute;
    top: 10px;
    left: 10px;
    border:1px solid blue;
}
.son_1 {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid red;
}
</style>

<div class="common parent">
    부모영역
    <div class="common son_1">자식영역</div>
</div>

 

10-1.png

 

위치의 변동이 일어나지 않음을 알 수 있다. 더 정확히 알아보기 위해 자식 DIV를 추가하고 현재 부모영역을 relative로 바꾸어 보자.

 

<style>
* {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.common {
    width: 100px;
    height: 100px;
}
.parent {
    position: relative;
    top: 10px;
    left: 10px;
    border:1px solid blue;
}
.son_1, .son_2 {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid red;
}
</style>

<div class="common parent">
    부모영역
    <div class="common son_1">
         자식영역 1
          <div class="common son_2">자식영역 2</div>         
    </div>
</div>

 

10-2.png

 

부모 DIV의 relative를 기준으로 위치하지 않고 자식영역 1의 위치를 기준으로 자식영역 2가 위치하고 있는 것을 볼 수 있다.

 

정리하면, 상위 가장 가까운 relative요소를 기준으로 absolute가 위치한다는 얘기는 사실이 아니다.

어느 위치든지 부모가 감싸면 그 부모 위치를 기준으로 absolute가 이동됨을 알 수 있다.

 

static의 경우 어쩔 것이냐?를 묻는다면 static은 그 자체로 top, left, right, bottom등이나 z-index가 반영되지 않는 존재이다.

즉 static을 기준으로 위치를 잡는 것 자체가 어불성설이다. 위치값에 대한 기준을 당연히 반영할 수 없는 것이다. 정확한 결과를 확인하기 위해 stactic안에 absolute를 넣어보자. 당연히 static을 기준으로는 반영되지 않는다.

 

<style>
* {
     margin: 0px;
     padding: 0px;
}
.static {
     position: static;
     width: 100px;
     height: 100px;
     border:1px solid red;
     top: 30%;
     left: 40%;
}
.absolute {
     position: absolute;
     width: 100px;
     height: 100px;
     border: 1px solid blue;
     top: 10px;
     left: 200px;
}
</style>
 
<div class="static">STATIC 1</div>
<div class="static">STATIC 2
     <div class="absolute">ABSOLUTE 1</div>
</div>
<div class="static">STATIC 3</div>

 

10-3.png

 

 

2번째 static박스의 자식으로 absolute를 반영하였지만 처리된 좌표는 화면의 시작점임을 알 수 있다.

 

float는 반영이 될까? absolute의 속성은 어떤 영역을 화면에 좌표값으로 위치 시키는 것이다. 당연히 absolute에 float는 동작되지 않는다.

 

아래의 예를 보자.

 

<style>
* {
     margin: 0px;
     padding: 0px;
}
.static {
     position: static;
     width: 100px;
     height: 100px;
     border:1px solid red;
     top: 30%;
     left: 40%;
}
.absolute {
     position: absolute;
     float: left;
     width: 100px;
     height: 100px;
     border: 1px solid blue;
     top: 10px;
     left: 200px;
}
.float_test {
     width: 100px;
     height: 100px;
     border: 1px solid blue;
}
</style>
 
<div class="static">STATIC 1</div>
<div class="static">STATIC 2
     <div class="absolute">ABSOLUTE 1</div>
     <div class="float_test">Float_TEST</div>     
</div>
<div class="static">STATIC 3</div>

 

10-4.png

 

위의 예제에서 16번째 줄에 float: left;를 추가하고 바로 뒤에 DIV박스를 추가하여 보았다. float가 불가능함을 알 수있다.

 

이제 모든 것을 정리해 보자. 

 

우리는 요소들을 묶을때 항상 주의해야 하는 부분이 있다. 브라우저의 크기나 모양이 바뀌었을 때도 올바른 화면을 표시하여야 한다. 이때 주의해야 할것이 요소의 위치이다. 아래의 경우를 생각해 보자.

 

abouslute내의 absolute:

    이 경우 브라우저의 크기나 모양이 바뀌어도 절대좌표라 정확한 위치에 있지 않다. 기준점이 absolute가 되기때문이다. 

 

relative내의 absolute:

    이 경우 화면 이동에 따라 relative가 위치되고 자식인 absolute는 relative 따라 위치하기 때문에 정확한 위치에 요소가 표시된다.

 

이러한 이유로 가능하면 relative-absolute의 구조를 지녀야 한다는 의미이다.

 

결국 relative를 기준으로한 absolute를 사용하란 의미이지, abosolute의 자식으로 absolute를 사용하지 못한다는 의미는 절대아니다.

또한, ablsolute의 기준값이 부모요소중 가장 가까운 relative요소가 아니라는 점이다.

 

아래 간단한 예제를 분석해 보자. 찾기박스의 위치를 relative로 지정하고 "찾기"를 absolute를 지정하여 브라우져의 크기변화가 있어도 항상 올바른 위치로 표시됨을 알 수 있다.

 

<style>
* {
    margin:0;
    padding:0;
    text-decoration: none;
}

/* 검색박스 위치 설정*/
.search_box {
    width:220px;
    margin:100px auto
}
/* position:relative 선언, "찾기" 기준점 지정*/
.input_wrap {
    position:relative;
    display:inline-block;
    width:220px;
    height:40px;
    border:2px solid #6b6e6e;
    background:#fff;
    vertical-align:top
}
/* 스타일 선언 */
.input_text {
    display:block;
    height:38px;
    padding:0 30px 0 10px;
    line-height:38px;
    border:0;
    outline:none;
    vertical-align:top;
    font-size:13px
}
/* position:absolute를 선언, 절대좌표 지정*/
.search {
    position:absolute;
    top:50%;
    right:10px;
    width:40px;
    height:20px;
    margin-top:-10px
}
</style>

<div class="search_box">    
    <span class="input_wrap">             
        <input type="text" class="input_text">           
            <a href="#" class="search">검색</a>    
    </span>
</div>

 

 

10-5.png

 

 

?
  • ?
    KKMS 2017.05.15 17:04

    <html lang="ko">
        <head>
            <meta charset="utf-8">
            <style>
                * { margin: 0px; padding: 0px;}
                html, body {
                    width: 100%;
                    height: 100%;
                    border: 1px solid red;
                }
                p {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 300px;
                    height: 300px;
                    border: 1px solid blue;
                    margin: auto;                
                }
            </style>
        </head>
        <body>
            <p>안녕</p>
        </body>
    </html>
     


List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134704
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83949
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24265
37 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
» HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
Board Pagination Prev 1 2 3 Next
/ 3