오늘도 개발
CSS Position 이해하기(relative, absolute, fixed) 본문
0. Position이란?
요소를 어떻게 위치시킬지 정해주는 프로퍼티.
값 : static(디폴트), relative, absolute, fixed
1. static
HTML 플로우대로 위에서 아래로, 좌측에서 우측으로 요소를 위치시킨다.
모든 요소의 디폴트 값은 static이다.
<head>
<style>
.box1 {
background-color: yellow;
width: 240px;
height: 240px;
}
.box2 {
background-color: blue;
width: 120px;
height: 120px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</head>
2. relative
relative를 적용한 요소는 기본적으로 static과 똑같이 배치된다.
하지만 static과 달리 relative가 적용된 요소에는 오프셋 프로퍼티(top, bottom, left, right)를 적용할 수 있다.
오프셋 프로퍼티를 지정하면 요소가 static일 때 위치했을 곳을 기준으로 상, 하, 좌, 우로 이동시킬 수 있다.
<head>
<style>
.box1 {
background-color: yellow;
width: 240px;
height: 120px;
}
.box2 {
background-color: blue;
width: 240px;
height: 120px;
position: relative;
top: 40px; /* 자기의 원위치 상단에서 40px 떨어진 곳에 위치 */
left: 50px; /* 자기의 원위치 좌측에서 50px 떨어진 곳에 위치 */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
3. absolute
absolute를 적용한 요소는 기본적으로 가장 가까운 부모 중 position이 static이 아닌 요소 를 덮는 방식으로 배치된다.
직속 부모가 static이면 부모의 부모로 타고 올라가며 static이 아닌 요소를 찾는다.
모든 요소가 static이면 html을 기준으로 삼는다.
보통 기준으로 삼을 부모 요소의 position을 relative로 설정해준다.
<head>
<style>
.parent {
background-color: yellow;
width: 240px;
height: 120px;
position: relative; /* .child의 기준점이 됨 */
}
.child {
background-color: blue;
width: 220px;
height: 100px;
position: absolute; /* 오프셋 프로퍼티 지정 안함 */
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
absolute가 적용된 요소에는 오프셋 프로퍼티(top, bottom, left, right)를 적용할 수 있다.
오프셋 프로퍼티를 지정하면 기준 삼는 부모 를 기준으로 요소를 이동시킬 수 있다.
<head>
<style>
.parent {
background-color: yellow;
width: 240px;
height: 120px;
position: relative; /* .child의 기준점이 됨 */
}
.child {
background-color: blue;
width: 240px;
height: 120px;
position: absolute;
top: 40px; /* .parent div의 상단에서 40px 떨어진 곳에 위치 */
left: 50px; /* .parent div의 좌측에서 50px 떨어진 곳에 위치 */
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
4. fixed
fixed를 적용한 요소는 기본적으로 absolute를 적용한 것처럼 배치된다.
fixed가 적용된 요소에도 오프셋 프로퍼티(top, bottom, left, right)를 적용할 수 있다.
여기서 absolute와 달리 fixed 요소는 viewport를 기준으로 요소를 이동시킨다.
fixed 요소가 absoulte와 다른 또 한 가지는 스크롤을 올리든 내리든 그 자리에 계속 있다는 점이다.
+ z-index
여러 요소가 겹칠 때 무엇을 앞에 놓을지 정해주는 프로퍼티이다.
기본값은 0이고 숫자가 클수록 다른 요소 위에 올라간다.
부모 값이 낮으면 자식 값이 높아도 다른 부모 값은 못 이긴다. (stacking context 고려해야 함)
<head>
<style>
div {
width: 240px;
height: 120px;
}
.parent1 {
background-color: yellow;
position: relative;
z-index: 1;
}
.parent2 {
position: relative;
background-color: green;
position: relative;
z-index: 2;
}
.child1{
position: absolute;
background-color: blue;
width: 120px;
height: 120px;
top: 30px;
left: 50px;
/* z-index: 3;이라도 부모가 1이라서 맨 위에 올라오지 않음*/
}
.child2{
position: absolute;
background-color: red;
width: 120px;
height: 120px;
top: -30px;
left: 70px;
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">
</div>
</div>
<div class="parent2">
<div class="child2">
</div>
</div>
</body>
'웹 프로그래밍 > HTML & CSS' 카테고리의 다른 글
| 시맨틱 태그(Semantic Tag)와 시멘틱 웹(Semantic Web) (0) | 2022.06.20 |
|---|---|
| CSS로 반응형 웹 구현하기 (0) | 2022.05.13 |
| CSS display 이해하기 3 (grid) (0) | 2022.05.13 |
| CSS display 이해하기 2 (flex) (0) | 2022.05.13 |
| CSS display 이해하기 1 (inline, block, inline-block) (0) | 2022.05.13 |
