관리 메뉴
Minwoo Dev.
[HTML/CSS] position : absolute , fixed 본문
728x90
반응형
SMALL
position : absolute
absolute는 '절대적인' 이라는 뜻을 가지고 있다.
absolute 속성값은 position : static이 아닌 조상을 찾아 그 조상을 기준으로 움직인다.
조상(부모들) 값들 중에 position 속성값이 기본이 아닌 조상이 없다면 제일 상위 태그인 <body>를 기준으로 위치가 정해진다.
예시를 보자.
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 5px solid blue;
}
.minibox2{
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">
box2
<div class="minibox2">mini</div>
</div>
<div class="box3">box3</div>
</body>
</html>
위 코드에서는 position 속성값을 변경한 부모가 없다.
따라서 mini는 가장 상위태그인 <body> 태그를 기준으로 정해진 위치만큼 이동할 것이다.
결과
position : absolute를 사용하면 부모자식관계에서 벗어난다.
따라서 적용된 요소는 독립적으로 바뀌게 된다.
결론적으로 부모 요소에서의 공간이 사라지고, 콘텐트의 크기에 맞는 만큼으로 너비가 변경된다.
position : fixed
fixed는 고정된 값을 의미한다.
많이 사용하는 웹사이트에서 스크롤을 내려도 계속 고정된 위치에서 따라오는 것을 본 적이 있을것이다.
position : fixed를 사용한다면 그런 효과를 낼 수 있다.
예시를 통해 확인해보자.
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 5px solid blue;
}
.minibox2{
background-color: aqua;
position:fixed;
left:0;
top:0;
}
.box3{
height: 5000px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">
box2
<div class="minibox2">mini</div>
</div>
<div class="box3">box3</div>
</body>
</html>
결과
해당 위치에 고정된다는 것 말고는 기본적으로는 absolute와 동일하다. 설정되면 부모 요소에서 벗어난 독립적 요소가 되고, 콘텐트의 사이즈에 맞게 크기가 조절된다(인라인 값으로 변한다).
728x90
반응형
LIST
'Web' 카테고리의 다른 글
| [HTML/CSS] 성배 레이아웃(Holy Grail Layout) - float (0) | 2023.12.20 |
|---|---|
| [HTML/CSS] 성배 레이아웃(Holy Grail Layout) - flex (1) | 2023.12.20 |
| [HTML/CSS] CSS position:relative , static (1) | 2023.12.17 |
| [HTML/CSS] CSS 결합자 (CSS Combinters) (0) | 2023.12.14 |
| [HTML/CSS] CSS 선택자 (CSS Selector) (0) | 2023.12.13 |
'Web' Related Articles
more
