CSS position: Relative VS. Absolute

Currently not clear in my head.

 

1. Get definition from docs

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

 

position property를 사용한다면 top, right, bottom, left에 의해 position이 사용된 element의 최종 위치가 결정.

 

---

Position property의 value: static(default), relative, absolute, fixed, sticky.

Static:

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

디폴트이기 때문에 normal flow를 따른다고 하고 배운것 처럼 z-index는 아무런 영향을 미치지 못한다.

 

Relative:

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

 

자기 자신을 기준으로 offset이 결정됨

z-index가 있다면 새로운 stacking content를 생성함.

 

Absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

 

z-index가 있다면 relative와 마찬가지로 new stacking content(order)가 생성됨.

** 만약 position을 absolute로 설정한다면 해당 element는 가장 가까운 parent와 relative한 위치로 결정된다. 가까운 parent element가 없다면, 초기 컨테이닝 블락이 기준이 된다.

** 그리고 normal document flow에서 제외되기 때문에 absolute position이 설정된 element를 위한 공간은 없어지고 위에 떠있는 느낌(?)이 되버린다.

 

**absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그가 기준이 됩니다.(www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1)

* 만약 부모 중에 position이 static이 아닌 것이 있다면 그 것을 기준으로 위치가 결정.

 

 

요약: 특정 absolute element의 포지셔닝의 기준은 가장 가까운 element(없다면 초기 컨테이닝 블락)이 위치지정의 기준이 되고 이 element를 위한 공간은 따로 주어지지 않는다.

 

이 page에서 강아지가 있는 그림이 absolute 포지션이 설정되어 있는데,

다른 element와 달리 어떤 공간이 지정되어 있지 않은 것을 알 수 있다.

이 그림의 parent element는 ?????

 

 

밑에 title-img의 css는 다음과 같다.

.title-img {
    position: absolute;
    top:0;
    left: 0;
  }

그림에서 보이듯, top과 left를 0으로 설정하니 기준점이 어떤 것인지 파악할 수 있다.

해당 box는

criterion

위의 이미지에서 position항목을 보면 "div.col-lg-6"라고 나온다.

저게 기준점의 되는 "tag(container block?)"을 나타내는 것 처럼 보인다.

<div class="col-lg-6">
    <img class='title-img' src="images/iphone6.png" alt="iphone-mockup">
</div>

실제로 title-img의 가장 가까운 tag는 "col-lg-6"가 맞다.

 

#################################################

!!!!!!!!!!!!!!! Found the reason why div.col-lg-6 is relative. !!!!!!!!!

Inspect: div.col-lg-6 ( parent container of title-img )

it says its position is relative.

?????????

Why col-lg-6 becomes relative?

There isn't any css styles for this box.

From docs in " Bootstrap Grid System " says:

Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.

 

This is WHY 'title-img' is positioned by 'div.col-lg-6' that is relative by default since I used bootstrap grid system !!!!.

This makes sense.

😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂

 

 

 

---

만약 absolute position을 사용하려고 하고 뜻대로 되지 않는다면 브라우저의 "DEBUG CSS"과 브라우저의 "inspector"를 사용해서 기준점이 되는 블락을 찾으면 될 것이다.

 

---

<참고한 블로그들>

engkimbs.tistory.com/922

[HTML&CSS] position 속성 정리하기!

www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1

(CSS) CSS 포지션(position) - static, relative, absolute, fixed