-
css positionFrontEnd/css 2023. 8. 11. 17:08반응형
✅ 아래 내용들에 대해서 알아보자
- 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