[HTML & CSS] Absolute

[absolute]

• absolute는 position의 속성값이다.
• 웹에서 주로 활용되는 absolute는 상단 메뉴바에서 메뉴 선택하고 하위 메뉴탭을 보여줄 때 해당 위치에 다른 태그들과 겹쳐 보이게 배치될 때 많이 쓰인다.
• absolute를 적용하지 않으면 태그들이 서로 겹쳐보이지 않는다.
• 아래 그림(초록색 박스와 이미지)은 서로 다른 태그로 구성되어 있으며, absolute를 적용했을 때의 모습과 적용하지 않았을 때의 모습이다.

absolute를 적용했을 때

 

absolute를 적용하지 않았을 때

 

[x,y,z 축의 의미]

• x축은 모니터를 기준으로 가로 축을 의미한다.
• y축은 모니터를 기준으로 세로 축을 의미한다.
• z축은 내가 바라보는 모니터를 기준으로 점점 앞으로 나오는 3차원 축을 의미한다.

x, y, z 축의 의미

 

[absolute와 fixed의 특징]

1. absolute는 fixed와 특징이 비슷하다.

 

2. absolute를 적용하면 z축으로 나온다.

• 일반적인 태그는 z축으로 나오지 않기 때문에 absolute나 fixed가 적용된 태그는 일반적인 태그보다 위에 배치된다.

 

3. absolute 형제들끼리는 z축 순서가 있다.

• 형 엘리먼트가 가장 밑에 배치되고 막내동생일수록 가장 위에 배치된다.
• absolute가 적용된 태그가 생성될 수록 점점 위로 쌓인다.
• 위로 쌓이는 순서는 z-index라는 속성으로 변경이 가능하다.
• z-index: 1;는 순서상 가장 위로 배치, z-index: -1;은 한 칸 아래로 배치한다는 의미이다.

 

4. display로 구성 가능한 레이아웃은 display로 사용한다.

• display로 도저히 레이아웃을 구성할 수 없을 때만 absolute를 사용하여 레이아웃을 구성해야한다.

 

5. 위치속성은 부모역할을 하고 있는 엘리먼트를 기준으로 작동한다.

• 위치속성 : left, right, top, bottom
• 부모역할 : absolute나 fixed를 가두는 엘리먼트, 너비높이 상속, 위치속성기준

 

6. relative가 없는 absolute나 fixed는 body가 부모엘리먼트 역할을 한다.

 

7. relative를 적용하게 되면 부모역할을 하는 엘리먼트가 body에서 relative를 적용한 엘리먼트로 변경된다.

• relative는 어느 상위 엘리먼트에 적용할 수 있다.
• 여기서 말하는 상위 엘리먼트는 부모, 조상 엘리먼트를 모두 포함하며, 반드시 인접해있는 상위 엘리먼트가 아니여도 괜찮다.

 

 

★ ★ ★ ★ ★ ★ ★ ★ ★

• 상위 엘리먼트에 relative가 적용되지 않은 position: abolute;는 body가  기준이된다. (부모역할)
• 상위 엘리먼트에 relative가 적용된 position: absolute;는 해당 적용된 relative가 기준이된다. (부모역할)

See the Pen absolute by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 21일차 복습 by psm817 (@psm817) on CodePen.