Position
Posotion
요소의 위치를 지정하는 데 사용된다.
absolute
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position - absolute</title>
<style>
#element1 {
z-index: 2;
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 30%;
top: 20%;
}
#element2 {
z-index: 1;
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
left: 30%;
top: 20%;
}
</style>
</head>
<body>
<div id="element1"></div>
<div id="element2"></div>
</body>
</html>
absolute는 독립적인 배치 문맥을 잡게 되며 left: 30%; top: 20%;을 하게 될 시 body 태그의 기준으로
왼쪽으로 30% 띄어지고 위쪽으로 20%띄어지게 된다.
결과)
relative
테두리를 만들어준다. 기본적으로 다른 요소의 영역을 침범하지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position - relative</title>
<style>
.element1, .element2 {
position: relative;
width: 200px;
height: 100px;
top: 0;
}
.element1 {
background-color: coral;
}
.element2 {
background-color: brown;
}
div.in1, div.in2 {
position: absolute;
width: 50px;
height: 50px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
div.in1 {
background-color: red;
z-index: 2;
}
div.in2 {
z-index: 1;
background-color: violet;
}
</style>
</head>
<body>
<div class="element1">
<div class="in1"></div>
<div class="in2"></div>
</div>
<div class="element2"></div>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| [CSS] 정렬 (0) | 2024.01.24 |
|---|---|
| [CSS] Overflow (0) | 2024.01.24 |
| [HTML] 시맨틱 태그 (0) | 2024.01.24 |
| [CSS] FLEX (플렉스) (0) | 2024.01.20 |
| [CSS] margin 마진 (0) | 2024.01.20 |
