position은 복잡한 레이아웃을 만들어준다.
-
position: static;
-
position: relative;
-
position: absolute;
-
position: fixed;
📌 relative
relative은 기준으로 하고싶은 부모요소에게 적용한다
📌 absolute
relative 기준으로 움직인다 (자식요소)
만약 relative가 없으면 body기준으로 움직인다
예시
<style>
.a {
background-color: lime;
height: 100px;
width: 100px;
}
.b {
background-color: magenta;
height: 100px;
width: 100px;
}<body>
<body>
<div class="a">
<div class="b">
</div>
</div>
</body>
결과
📌 position 주기
.a 클래스 position:relative; 값을 주고 .b 클래스에는 position:absolute; 를 주고 margin 값을 지정했을 때
.a {
position: relative;
background-color: lime;
height: 100px;
width: 100px;
}
.b {
position: absolute;
margin-top: 50px;
margin-left: 100px;
background-color: magenta;
height: 100px;
width: 100px;
}결과
마젠타 색상이 margin-top: 50 만큼 left: 100 만큼 이동했다
'css' 카테고리의 다른 글
| Input 에 css 적용하기 (0) | 2021.01.13 |
|---|---|
| Table (0) | 2021.01.12 |
| flex-direction (0) | 2020.12.21 |
| div(3) (display) (0) | 2020.12.09 |
| div(2) (0) | 2020.12.08 |
댓글