[PUB] position

: 기본 값은 static이며 top, left, bottom, right 속성값은  무시됩니다.

1. absolute 

: 부모 엘리먼트애 구애받지 않고 엘리먼트를 자유롭게 배치

부모 엘리먼트가 aboulute, fixed, relative일 경우 부모기준 위치선정

    <div style="width:200px; height:200px; margin-top:100px; position: relative;">
        <div style="width:100px; height:100px; position:absolute; top:200px;">
        </div>
    </div>

2. fixed

: position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.

 

 

3. relative

 : position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.

    <div style="width:200px; height:200px; margin-top:100px;">
        <div style="width:100px; height:100px; position:relative; top:50; background-color: aqua; opacity: 0.5;">
            position : relative
        </div>

        <div style="width:100px; height:100px; position:relative; top:0px; left:50px; background-color: blueviolet; opacity: 0.5;">
            position : relative
        </div>

        <div style="width:100px; height:100px; position:absolute; top:150px; background-color: rgb(255, 0, 200); opacity: 0.5;">
            position : absolute
        </div>
    </div>

 

4. 참고

.offset() : fixed 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다.

 

.position() : absolute 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다.

 

 

출처

https://www.daleseo.com/css-position-absolute/