[HTML & CSS] Absolute 문제풀이

[absolute 너비높이 상속]

[문제]

아래 코드는 position과 관련된 문제이다. 다음과 같은 조건을 만족하도록 코드를 수정해보세요.

 

1. 초록색 박스가 주황색 박스를 기준으로 아래에 배치
2. 초록색 박스가 배너 이미지와 겹치보이게 배치
3. 초록색 박스가 배너 이미지 전체를 가리게 배치

See the Pen absolute 너비 상속 문제 by psm817 (@psm817) on CodePen.

 

[풀이]

1. 초록색 박스가 주황색 박스를 기준으로 아래에 배치

1. 초록색 박스가 주황색 박스 아래에 배치되기 위해선 두 태그가 부모와 자식의 관계이기 때문에 position을 이용한 위치를 배치하는 것이 좋다.
2. absolute-2나 absolute-3는 정의되지 않았기 때문에 생략하고, absolute-1에 대해서만 position: absolute를 추가한다.
3. absolute-1에 absolute를 적용하게 되면 초록색 박스는 화면에서 보이지 않게된다. 이유는 absolute일 때 너비가 auto이면 0이기 때문에 너비 속성이 없어 화면에 보이지 않는다.
4. width: auto=0; 이면 하위요소 크기만큼 너비를 가진다.
5. 따라서, absolute-1에 width: 100%를 적용하여 초록색 박스가 다시 보여지게 만들어 준다. 
6. 주황색 박스 아래에 배치하기 위해서는 absolute-1에서 top:100%을 추가하여 주황색 박스의 높이만큼 떨어뜨려 초록색 박스를 아래에 배치한다. 이 때 top의 값을 주황색 박스의 고정 높이인 500px을 주지않고 100%로 주는 이유는 수월한 반응형 작업과 유지보수의 편리함을 위함이다.

 

 

2. 초록색 박스가 배너 이미지와 겹치보이게 배치

1. 초록색 박스가 주황색 박스 기준으로 아래에 배치는 됐지만 배너 이미지보다도 밑에 배치가 되어있는 상황이다.
2. 현재는 position: relative가 적용된 태그가 없기 때문에 absolute-1의 부모역할을 body가 하게된다.
3. 부모역할을 body가 하기 때문에 배너 이미지보다 더 밑에 배치되는 것이다.
4. 박스와 이미지가 겹쳐 보이기 위해선 초록색 박스인 absolute-1이 body 기준이 아닌 주황색 박스인 box 기준으로 top:100%를 위치해야 한다.
5. 주황색 박스인 box에 position: relative를 추가한다.

 

3. 초록색 박스가 배너 이미지 전체를 가리게 배치

1. 현재 position: relative가 주황색 박스인 box에 적용되어 있기 때문에 부모역할을 box가 하게된다.
2. box가 부모역할이면 초록색 박스인 absolute-1은 당연히 box의 너비를 상속받게 된다.
3. box의 너비는 500px이므로 초록색 박스가 배너 이미지 전체를 가릴 수 없다.
4. 전체를 가리기 위해선 주황색 박스인 box보다 더 상위 엘리먼트를 생성하여 relative 대상을 변경해야한다.
5. top-box라는 상위 엘리먼트를 생성하고 postion:relative를 적용하면 absolute가 적용된 초록색 박스 absolute-1의 부모역할은 top-box가 하게되고, top-box의 특성상 width:auto일 때 100%를 차지하기 때문에 초록색 박스가 너비가 500px이 아닌 100%가 되어 이미지 전체를 가릴수 있도록 배치된다.

See the Pen absolute 너비 상속 by psm817 (@psm817) on CodePen.

 

 

[복습]

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