배치 관련 스타일(position)

position은 요소의 위치를 지정하는 속성

position : relative; (상대적인)

• 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성.

• 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음.

---

position : absolute; (절대적인)

• 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함.

---

position : fixed; (고정된)

• 항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)

---

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

div {
    border: 1px solid black;
    box-sizing: border-box;
}

.container-1 {
    border: 2px dashed red;
    position: relative;

    /* 내부에 작성되는 요소에 상대적 위치
    (top, bottom, left, right)룰 지정할 수 있음 */
}

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

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

    top: 50px;
    left: 50px;

    position: absolute;
}

.third {
    width: 100px;
    height: 100px;
    background-color: red;

    top: 100px;
    left: 100px;
    position: absolute;
}

---

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


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

.container-2 {
    width: 300px; 
    height: 300px;
    position: relative;
}

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

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    margin: auto;
}

.fixed-area {
    width: 120px;

    position: fixed;

    bottom: 50px;
    right: 50px
}