position속성은 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성
position: static, relative, absolute, fixed
-
static - 문서의 흐름대로 배치하기
position의 기본값으로 요소를 나열한 순새대로 배치하며 top, right과 같은 소성은 사용할 수 없다. -
relative - 문서 흐름 따라 위치 지정하기
static에서처럼 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용 할수 있으며 좌표값을 사용해 위치를 지정할 수 있다.
<html>
<title>
</title>
<style>
.box1 {
display: inline-block;
width: 100px;
padding: 20px;
background: blue;
margin-right: 10px;
}
.box2 {
display: inline-block;
position: relative;
left: -50px;
top:30px;
width: 100px;
padding: 20px;
background: red;
margin-right: 10px;
}
</style>
<body>
<div id="relative">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>- absolute - 원하는 위치에 배치하기
문서의 흐름과 상관없이 left, right, top, bottom 속성 값을 이용해 요소를 원하는 위치에 배치할 수 있다. 이 때 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소중 position 속성이 relative 요소
그래서 absolute를 사용할려면 그 요소를 감싸는 div를 만들고 position을 relative로 지정해 놓고 사용해야함.
<html>
<title>
</title>
<style>
#wrap {
position: relative; /* 기준이 되는 부모요소 */
width: 300px;
height: 300px;
border:1px solid #ccc
}
.box {
position: absolute; /* 위치를 지정할 작은 상자 */
width: 50px;
height: 50px;
background: blueviolet;
}
#card1 {
top: 0;
left: 0;
}
#card2 {
top:0;
right: 0;
}
#card3 {
top:100px;
right: 100px;
}
</style>
<body>
<div id="wrap">
<div class="box" id="card1"></div>
<div class="box" id="card2"></div>
<div class="box" id="card3"></div>
</div>
</body>
</html>- fixed - 브자우저 창 기준으로 배치
unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript