샘플 화면
<template>
<div class="container">
<div class="css-container">
<div class="static ">static</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
</div>
</div>
</template>
<style>
.container {
position: static;
font-size: 30px;
}
.css-container {
margin: 30px;
}
.container div {
background-color: red;
border: 2px solid rgb(0, 0, 0);
color: white;
}
.css-container div {
margin: 20px;
}
</style>
relative
- relative은 현재 부모의 태그를 위치를 기반으로 자리잡은 현재 위치를 기반으로 이동 한다.
- relative 속성을 left 40px를 주면 왼쪽 위치를 기준으로 40px 위치를 오른쪽으로 이동한다.
.relative {
position: relative;
left: 40px;
}
absolute
- Position 속성 적용 전
- 각 태그별로 위치가 자동으로 지정 되지만 위치를 무시하고 공중으로 떠있다고 생각하면 된다.
- 현재 태그의 최상위 태그 중 Position이 static이 아닌 태그의 위치로 이동 되며 해당 위치로 이동한다 .css-container position이 relative 이므로 left ,right top bottom 값을 0으로 변경 시 기준점의 위치는
<div class="css-container"> 태그 위치가 된다.
- .css-container 속성의 position의 값을 제거하면
<div class="absolute">absolute</div> 태그의 left ,right top bottom 0으로 변경 시 기준 점은 body 태그 위치로 이동하게 된다.
- absolute 속성을 적용시 absolute 태그가 공중으로 뜨면서 fixed 태그가 absolute 자리로 이동 된다 .css-container div의 margin 속성으로 인하여 20px 아래로 내려온다 .css-container div margin속성을 제거 시 겹쳐서 보일 것이다.
<template>
<div class="container">
<div class="css-container">
<div class="static ">static</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
</div>
</div>
</template>
<style>
.container {
font-size: 30px;
}
.css-container {
margin: 30px;
position: relative;
}
.container div {
background-color: red;
border: 2px solid rgb(0, 0, 0);
color: white;
}
.css-container div {
margin: 20px;
}
.absolute {
position: absolute;
}
</style>
fixed
- Position 속성 적용 전
- fixed 태그는
<div class="css-container"> 태그의 부모 태그로 감싸져 있지만 fixed 속성을 사용하면
left ,right top bottom 0으로 변경 시 최상위 태그 위치로 기준이 되어 미태 그림 처럼 맨위로 올라 온다.
- .css-container div margin 속성으로 인하여
<div class="css-container"> 태그의 20px의 여백이 생긴다. 제거하면 왼쪽 맨위에 위치하게 된다.
- 스크롤이 있을 경우 스크로을 아래 위로 움직일 때 left ,right top bottom 값으로 지정한 위치는 변경되지 않고 고정된다.
<template>
<div class="container">
<div class="css-container">
<div class="static ">static</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
</div>
</div>
</template>
<style>
.container {
font-size: 30px;
}
.css-container {
margin: 30px;
position: relative;
}
.container div {
background-color: red;
border: 2px solid rgb(0, 0, 0);
color: white;
}
.css-container div {
margin: 20px;
}
.fixed {
position: fixed;
left: 0;
top: 0;
}
</style>
z-index
- 태그의 우선 순위를 두어 같은 선상에 있는 태그에 위치를 앞으로 오거나 뒤로 가게 한다.
- 1, 9, 100, -1, -100등의 숫자로 그 속성의 값을 지정한다 숫자가 높을 수로 앞으로 온다
- z-index는 같은 형제 태그에 선언된 z-index끼리 비교하며 만약 같은 같은 형제 태그에서 z-index가 선언된 내용이 없으면
자식 요소의 z-index값을 가지고 확인한다.
- .box1의 z-index 값을 1000으로 설정 시 box1이 최상위에 보여지게 된다.
<style>
.wrap {
position: relative;
background: black;
width: 200px;
height: 200px;
}
.box1 {
position: absolute;
top: 0;
left: 0;
background: skyblue;
width: 40px;
height: 40px;
z-index: 10;
}
.box2 {
position: absolute;
top: 0;
left: 0;
background: pink;
width: 80px;
height: 80px;
}
.box2-1 {
position: absolute;
top: 0;
left: 0;
background: red;
width: 60px;
height: 60px;
z-index: 999;
}
</style>
<body>
<div class="wrap">
<div class="box1">
BOX1
</div>
<div class="box2">
BOX2
<div class="box2-1">BOX2-1</div>
</div>
</div>
</body>
