레이아웃 스타일4

• 배치 관련 스타일
  - position은 요소의 위치를 지정하는 속성
  
  - position: relative;
  : 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성
  : 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음
  
  - position: absolute;
  : 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함
  
  - position: fixed;
  : 항상 고정된 위치에 요소를 배치함. (화면 움직임에 상관없이 항상 같은 위치)

<div class="container-1">
   <div class="first"></div>
   <div class="second"></div>
   <div class="third"></div>
</div>

div{
    border: 1px solid black;
    box-sizing: border-box;
    /* width / height 값이 content + padding + border 합한 값에 맞게 알아서 비율 조정*/
}

.container-1{
    border: 2px dashed lightsalmon;
    position: relative;
    /* 내부에 작성되는 요소에 상대적인 위치(top/bottom/right/left) 지정 가능 */
}

.first{
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

.second{
    width: 200px;
    height: 200px;
    background-color: lightgray;

    position: absolute; /* 요소 기존 배치 무시(겹치기) 가능 */
    /* + 상위 요소가 relative -> 내부에 아무 위치 배치 가능 */

    top: 50px; /* 위쪽에서 얼마만큼 떨어지겠다 */
    left: 50px; /* 왼쪽에서 얼마만큼 떨어지겠다 */
}

.third{
    width: 100px;
    height: 100px;
    background-color: lightpink;
    
    position: absolute; /* 요소 기존 배치 무시(겹치기) 가능 */
    /* + 상위 요소가 relative -> 내부에 아무 위치 배치 가능 */
    
    top: 100px; /* 위쪽에서 얼마만큼 떨어지겠다 */
    left: 100px; /* 왼쪽에서 얼마만큼 떨어지겠다 */
}

---

• 요소를 영역 정 가운데에 배치하기

<h2>요소를 영역 정 가운데에 배치하기</h2>
<div class="container-2">
   <div id="center"></div>
</div>

/* 정 가운데 배치하기 */
.container-2{
    width: 300px;
    height: 300px;
    position: relative; /* 내부 요소 상대위치 지정 */
}

#center{
    width: 50px;
    height: 50px;
    background-color: lightsteelblue;

    position: absolute;

    /* 사방으로 요소를 당김 */
    top : 0;
    bottom : 0;
    right : 0;
    left : 0;
    
    margin: auto;
}

---

• 고정된 위치에 요소를 배치

<div class="fixed-area">
   <a href="#body-top">상단으로 이동</a>
</div>

/* fixed */

.fixed-area{
    width: 120px;

    /* align : 맞추다, 정렬하다 */
    text-align: center;

    position: fixed;
    /* fixed 요소는 화면(뷰포트, 브라우저) 기준으로 배치됨 
       + 다른 요소와 겹쳐질 수 있고,
         별도로 화면을 차지하려고 하지 않음 */

    bottom : 50px;
    right: 50px;
    background-color: antiquewhite;
}

.fixed-area>a{
    color: black;
}