[CSS] position 속성 - static, relative, absolute, fixed
by mini_min[CSS] position 속성 - static, relative, absolute, fixed
✔️ position 속성
: 문서 상에 요소를 배치하는 방법을 지정한다.
: top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
📓 속성값
1) static : 요소를 일반적인 문서 흐름에 따라 배치한다. (기본값) top, bottom, left, z-index 속성이 아무 영향을 주지 못한다.
2) relative : 요소를 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다. 자기 자신을 기준으로! top, right, bottom, left 속성 값에 따라 오프셋을 적용한다.
오프셋은 다른 요소에는 영향을 못준다. ❌
페이지 레이아웃에서 요소가 차지하는 공간은 static 일 때와 동일하다.
3) absolute : 요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다.
가장 가까운 조상 요소에 대해 상대적인 위치로 배치된다.
만일 부모 또는 조상 요소가 static 이거나 없으면 문서 본문 body 를 기준으로 위치가 결정된다.
부모 요소를 기준으로 삼으려면 부모 요소를 relative 로 정의해야함.
다른 요소가 먼저 배치된 경우, 뒤로 밀리지 않고 덮어쓴다.
최종 위치는 top, right, bottom, left 속성 값에 따라 지정된다.
✨선언시, block 레벨 요소의 너비는 content 에 맞게 변하기 때문에 적절한 width 지정해줘야한다.
4) fixed : 요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다.
부모 요소와 관계 없이 브라우저 뷰포인트를 기준으로 top, right, bottom, left 속성 좌표값을 사용해 위치 이동
스크롤이 되어도 항상 같은 곳에 위치한다!
✨선언시, block 레벨 요소의 너비는 content 에 맞게 변하기 때문에 적절한 width 지정해줘야한다.
5) sticky : 요소를 문서의 일반적인 흐름에 따라 배치하고, 가장 가까운 스크롤되는 조상과 컨테이닝 블록을 기준으로 top, right, bottom, left 속성 좌표값을 사용해 위치 이동
오프셋은 다른 요소에는 영향을 못준다. ❌
✔️ static 속성
: 기본. 일반적인 문서 흐름에 따라 배치.
.static-box {
position: static;
background: #333;
color: #eee;
font-weight: bold;
text-align: center;
line-height: 150px;
}
✔️ relative 속성
: 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다.
.relative-box {
position: relative;
left: 50px;
top: 50px;
background: #333;
color: #eee;
font-weight: bold;
text-align: center;
line-height: 150px;
}
✔️ absolute 속성
: 요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다.
.box {
width: 150px;
height: 150px;
margin: 50px 0 0 300px;
border: 3px dotted gray;
background: orange;
position: relative;
}
.absolute-box {
position: absolute;
left: 50px;
top: 50px;
background: #333;
color: #eee;
font-weight: bold;
text-align: center;
line-height: 150px;
}💡 부모 요소가 position: relative; 로 지정되어 있다. (static 이면 body 기준으로 위치 설정된다.)
💡 두번째 케이스 : 부모인 오렌지 박스에서 50, 50씩 떨어져서 만들어짐
width 지정안하면 컨텐츠 만큼 홀쭉해져서 나온다.
💡 첫번째 케이스 : 아버지 기준에서 50만큼 떨어지고 50만큼 떨어짐 일반적인 문서 흐름에 안따름 (부모 요소가 없어서 body 를 기준으로 함)
✔️ fixed 속성
: 요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간도 배정하지 않는다.
: 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
.fixed-box {
/*fixed 주니, left, top 이 먹혀서 고정된다.*/
position: fixed;
width: 150px;
height: 150px;
left: 100px;
top: 200px;
border: 3px dashed gray;
background: orange;
color: #eee;
font-weight: bold;
text-align: center;
line-height: 150px;
}
✔️ fixed 예시 (메뉴 , 사이드바 고정)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.container {width: 100%; height: 1500px; background: yellow;}
.container-body {position: relative; left: 0; top: 50px; padding: 20px;}
.fixed-box {
position: fixed;
color: tomato;
font-weight: bold;
text-align: center;
background: #2e303d;
}
.nav {
width: 100%;
height: 50px;
top: 0;
left: 0;
line-height: 50px;
}
.right {
width: 100px; height: 100%;
top:50px; right: 0;
background: green;
color: #fff;
}
.box {
width: 150px; height: 150px;
left: 100px; top: 200px;
border: 3px dashed gray;
line-height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav fixed-box">메뉴</div>
<div class="container-body">
<h3>내용</h3>
</div>
</div>
<div class="box fixed-box">fixed-box</div>
<div class="right fixed-box">right</div>
</body>
</html>💡 fixed-box 클래스 하나를 만들어두고, 고정되는 모든 영역에 클래스를 지정했다.
✔️ fixed 예시 2 (메뉴 , 사이드바 고정)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.container {
width: 1200px; height: 1500px;
margin: 0 auto;
background: yellow;
}
/*스크롤 내릴 때 주르륵 올라감. 있어야할 위치에 있기 때문에 */
.container-body {
position: relative;
left: 0; top: 50px; padding: 20px;
}
.fixed-box {
position: fixed; color: #e55c3c;
font-weight: bold;
text-align: center;
background: #2e303d;
}
.nav {
width: 1200px; height: 50px; margin: 0 auto;
line-height: 50px;
}
.box {
width: 150px; height: 150px;
left: 1100px; top:200px;
border: 3px dashed gray;
line-height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav fixed-box">메뉴</div>
<div class="container-body">
<h3>본문</h3>
</div>
</div>
<div class="box fixed-box">fixed-box</div>
</body>
</html>💡 /*스크롤 내릴 때 주르륵 올라감. 있어야할 위치에 있기 때문에 */
.container-body { position: relative; left: 0; top: 50px; padding: 20px; }
'HTML' 카테고리의 다른 글
| [CSS] columns 속성 / masonry layout 메이슨리 레이아웃 (0) | 2022.09.17 |
|---|---|
| [CSS] z-index 속성 (0) | 2022.09.17 |
| [CSS] float 속성 ⭐⭐ / 해제 방법 (0) | 2022.09.17 |
| [CSS] margin 겹침 (마진 상쇄 현상 Margin collapsing) (0) | 2022.09.17 |
| [CSS] border-style 속성 (box-shadow/ border-radius) (0) | 2022.09.17 |
블로그의 정보
개발자 미니민의 개발로그
mini_min