position, z-index

HTML

 

 

 

 

 

 

article>section*2>div*3 tab로 하나의 article안에 두개의 section으로 나눈후 div를 각각 세개씩 만들어준다.

 

 

 

 

 

 

 

CSS

 

 

 

 

 

 

 

1. article을 10px의 검정테두리를 만들고 넓이, 높이를 80%준다.

2. position을 absolute로 지정해주어 유령화를 시켜주고 위에서 10%, 왼쪽에서 10%로 위치를 지정해준다. top과 left는 position을 사용할때만 가능하다.

3. article안의 section의 높이와 넓이를 50%, top, left는 0으로 위치지정해준다.

 

 

 

 

 

 

 

 

 

 

 

 

4. 두개의 section중 두번째 section의 위치를 조정해준다. left를 auto로 준것은 두번째section의 위치가 article안의 맨 오른쪽으로 이동시키기 위함이다. auto를 주지않았을경우에는 위치가 이동되지않는다. auto는 가로 중앙에 배치한다는 뜻이다. 그리고 자연스럽게 좌우 여백은 균등하게 배분된다.

5. div의 넓이 높이 border 배경색을 지정해준다.

6. :nth-child를 이용하여 div의 1, 2, 3번째의 위치와 배경색을 지정해준다.

 

 

 

 

 

 

 

 

 

 

7. article>section:nth-child(2)>div:nth-child(2)로 article안의 두번째section의 두번째 div에 z-index를 사용하여 세번째div보다 앞으로 나오도록 지정해준다. z-index의 숫자가 높을수록 더 앞에 나온다.

 

 

 

 

결과