아래와 같은 간단한 예제로 여러가지 실험을 해보자..
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout1{
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="layout1"></div>
<div class="layout2"></div>
</body>
1. relative를 위쪽에만 주었을 경우.
.layout1{
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2{
width: 200px;
height: 200px;
background-color: skyblue;
}
layout1에는 top 20px, left 20px를 주었다. 당연히 현재를 기준으로 오른쪽 ,아래쪽으로 20px만큼 이동한다.
layout2는 그대로이지만 겹치는 이유는 기준점이 되는 애가 relative인 녀석의 이동하기 전이 기준이 된다.
또한 layout2가 layout1에 먹히는 모습이 보이는데 relative가 기존 static 보다 높은 우선순위를 차지한다.
2. 둘다 relative 일 경우
<style>
.layout1{
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2{
position: relative;
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
둘다 relative일 경우에는 아래쪽이 캐스팅되어서 높은 우선순위를 가지게 된다.
3. absolte 와 relative
<style>
.layout1{
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2{
position: relative;
width: 200px;
height: 200px;
background-color: skyblue;
}
absolute의 경우에는 가진 태그의 상단을 올라가면서 static이 아닌 애의 기준으로 position이 정해진다.
따라서 layout1의 포지션은 body 태그 쪽에 자리잡히게 된다. (별동의 공간)
layout2같은 경우에는 부모인 Body를 기준으로 자리 잡히게 된다.
4. 연속된 absolute 의 경우
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout1{
position: absolute;
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2{
position: absolute;
width: 200px;
height: 200px;
background-color: skyblue;
}
.layout3{
position: absolute;
width: 200px;
height: 200px;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="layout1"></div>
<div class="layout2"></div>
<div class="layout3"></div>
</body>
예상한대로 3개가 겹치게 된다.
5. 그렇다면 relative 안에 relative의 경우에는?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout1 {
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2 {
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: skyblue;
}
.layout3 {
position: relative;
width: 200px;
height: 200px;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="layout1">
<div class="layout2"></div>
</div>
<div class="layout3"></div>
</body>
layout1을 body를 기준으로 자리잡게 된다. layout2의 부모는 layout1이므로 layout1을 기준으로 움직이게된다.
layout3은 body를 기준이지만 layout1과 나란히 있으므로 top과 bottom이 움직이기 이전을 기준으로 정렬된다.
겹치는 순서는 마지막이 가장 우선순위가 높다.
6. absolute와 releative 순서에 대해서
layout1 과 layout2과 각각 rleative absolute 순서라면 둘은 겹치게된다. 하지만 position 속성이 반대라면 둘은 나란히 정렬되게 된다. 이유는 absolute는 부모를 기준으로 매핑이 되고 relative는 현재 같은 형재들을 기준으로 매핑이된다.
7. 가장 많이 사용하는 releative안에 absolute
absolute는 부모중에 처음으로 static 기본 속성이 아닌 녀석을 기준으로 기준이 정해진다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout1 {
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: tomato;
}
.layout2 {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="layout1">
<div class="layout2"></div>
</div>
</body>
'개인공부' 카테고리의 다른 글
| 이벤트 위임 (2) | 2020.12.30 |
|---|---|
| CSS : 움직임, 클릭리스너 적용 (2) | 2020.12.30 |
| 의미론적 태그 (0) | 2020.12.21 |
| caching (0) | 2020.11.15 |
| Redis 기본 사용법 (0) | 2020.11.14 |
