css position
2023. 8. 11. 17:08ㆍFrontEnd/css
✅ 아래 내용들에 대해서 알아보자
- position
- 예제 코드
position
요소의 위치를 지정하는 데 사용되며, 요소를 문서 내에서 어떤 방식으로 배치할지 제어하는 속성이다.
| 종류 | 특징 |
| static | - 요소가 html 문서에서 일반적인 흐름에 따라 배치 된다. 위치지정 불가!! |
| relative | - static과 마찬가지로 문서의 일반적인 흐름에 배치된다. - top, right, bottom, left, z-index를 사용하여 상대적인 위치 지정 가능하다 |
| absolute | - 문서의 일반적인 흐름을 따르지 않는다 - 요소가 position:static 속성을 가지지 않는 부모의 기준으로 움직인다. - 만약 부모 요소 중 포지션이 relative, absolute, fixed인 태그가 없으면 가장 위 태그(body)가 기준이 된다. |
| fixed | - viewport(브라우저 창) 기준으로 절대적으로 배치된다 - 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다 |
| sticky | - 요소가 html 문서안에서 static과 같이 일반적인 흐름을 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성 - top, right, bottom, left, z-index 속성을 사용하여 상대/절대 위치 지정 가능 - 헤더 매뉴에 많이 쓰인다. |
| z-index | - 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성이다.(높을수록 더 앞에 나오게 됨) - z-index는 position(relative, absolute, fixed) 속성이 적용된 요소에서만 작동한다 |
예제 코드
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Position</title>
</head>
<style>
/* position
*static(기본값)
- static은 요소가 html 문서에서 일반적인 흐름에 따라 배치가 된다. 위치지정 불가
*relative
- static과 마찬가지로 문서의 일반적인 흐름에 배치된다.
- top, right, bottom, left, z-index를 사용하여 상대적인 위치 지정 가능
*absolute
- 문서의 일반적인 흐름을 따르지 않는다.
- 요소가 position:static 속성을 가지지 않는 부모의 기준으로 움직인다.
- 만약 무보 중 포지션이 relative, absolute, fixed인 태그가 없으면 가장 위의 태그(body)가 기준이 됨
*fixed
- viewport(브라우저 창) 기준으로 절대적으로 배치된다
- 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.
*sticky
- 요소가 html 문서안에서 static과 같이 일반적인 흐름을 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성
- top, right, bottom, left, z-index 속성을 사용하여 상대/절대 위치 지정 가능
- 헤더 매뉴에 많이 쓰인다
*z-index
- 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성이다.(높을수록 더 앞에 나온다)
- z-index는 position (relative, absolute, fixed)속성이 적용된 요소에서만 작동한다.
*/
main,
section,
article,
div {
border: 1px solid black;
padding: 20px;
}
body {
margin: 0px;
padding: 0px;
}
main {
/*최대 600px*/
max-width: 600px;
margin: 0 auto;
background-color: yellow;
}
section {
background-color: violet;
position: relative;
}
article {
background-color: cyan;
}
div {
background-color: white;
}
div.relative {
position: relative;
top: 2px;
right: 2px;
}
div.absolute {
position: absolute;
background-color: gray;
top: 0px;
left: 0px;
}
div.fixed {
position: fixed;
background-color: blue;
}
div.sticky {
position: sticky;
top: 50px;
}
</style>
<body>
<main>
main
<section>
section
<article>
article
<div>static</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>
<div class="sticky">sticky</div>
<div style="height: 1000px"></div>
</article>
</section>
</main>
</body>
</html>
결과 화면
반응형
'FrontEnd > css' 카테고리의 다른 글
| css 가상클래스/가상 요소 (0) | 2023.08.11 |
|---|---|
| css float (0) | 2023.08.11 |
| css display (0) | 2023.07.31 |
| CSS 폰트 및 크기 (0) | 2023.07.30 |
| CSS 선택자(Selector) (0) | 2023.07.30 |