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
}