고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
position 속성에 대한 지식은 absolute에서 멈춰져 있던 상황.
absolute의 기준점이 상위의 relative를 통해 정해지고 아니면 root 요소라는 것.
fixed는 그냥 absolute로 해결이 안되면 사용하는게 전부.
sticky 사용해보고 잘되면 사용 안되면 될 때까지 삽질.
이번에도 sticky를 사용하며 결국 기술부채를 해결하기로 했다.
그래서 absolute, fixed, sticky는 어떻게 다른가
static
- default 값
- normal page flow를 따른다.
left,right,top,bottom,z-index은 영향을 주지 못한다.static끼리는 나중 선언된 요소가 위로 올라온다.(z-index가 적용되지 않기 때문에)static의z-index는 기본적으로 0이다.
relative
- 원본 속성 적용 이후 위치 속성 값으로 누른다.(nudge)
left,right,top,bottom,z-index가 동작한다.static+relative인 경우 위치 속성이 나중에 적용되기 때문에relative가 항상 위에 올라온다.
absolute
- 문서의 흐름에서 제거된다.
- 다른 요소들이 존재하지 않는 것처럼 동작하는 반면 다른 모든 위치 속성은 해당 요소에서 동작한다.
- 위치 속성 값이 동작하는 기준점은 처음 만나는
relative로 정의된 부모 요소이다. relative로 정의된 부모가 없으면 document(root 요소)를 기준으로 한다.
fixed
absolute포지션과 같이 문서 흐름에서 제거된다.fixed요소는absolute와 거의 동일하게 동작한다. 다만 기준점은 특정 부모요소가 아니라 viewport를 기준으로 한다.- 결과적으로 scroll 동작에 영향을 받지 않는다.
sticky
relative와fixed의 중간쯤 되는 정의- 뷰포트의 스크롤 위치가 지정된 임계값(threshold)에 도달할 때까지
relative요소와 같이 처리된다. - 임계값에 도달하면
fixed처럼 취해진다. - relative 로 정의된 부모가 없으면 document(root 요소)를 기준으로 한다.
the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
그래서.. 임계값(threshold)의 의미가 도대체 뭘까?
테스트를 통해 얻은 결론은...
💡 임계값 ⇒ viewport를 기준으로 left, right, top, bottom 값이 맞춰지는 지점.
💡 viewport를 기준으로 움직일 수 있는 제한을 거는 행위 like threshold
inherit
- 위치 값(범위가 어디까지인가?)은 상속되지 않는다.
inherit을 이용하여 부모로부터 상속받을 수 있다.
샘플 코드
See the Pen CSS Position by lundella (@lundella) on CodePen.
<html>
<body>
<style>
body {
width: 200%;
height: 1000px;
padding: 10px;
}
.wrapper {
width: 100%;
height: 100%;
border: 1px solid black;
}
.content-static {
width: 200px;
height: 200px;
background-color: blue;
position: static;
}
.content-index {
width: 200px;
height: 200px;
background-color: violet;
position: static;
margin-top: -100px;
}
.content-relative {
width: 200px;
height: 200px;
background-color: red;
position: relative;
margin-top: -100px;
/* z-index: -1; */
}
.content-fixed {
width: 200px;
height: 200px;
background-color: greenyellow;
position: fixed;
bottom: 109px;
right: 100px;
}
.content-sticky {
width: 200px;
height: 200px;
margin-right: 0;
background-color: gold;
position: sticky;
/* margin: 0 auto; */
top: 10px;
/* bottom: 10px; */
/* right: 20px; */
/* left: 20px; */
}
</style>
<div class="wrapper">
<div class="content-static"></div>
<div class="content-index"></div>
<div class="content-relative"></div>
<div class="content-fixed"></div>
<div class="content-sticky"></div>
</div>
</body>
</html>
그 외
아래 참고 사이트의 정보를 읽다보면 sticky 속성이 일부 브라우저에서만 지원한다고 언급된다.
하지만 시대가 변함에 따라 지금은 거의 모든 브라우저에서 지원하고 있기 때문에 특수한 경우가 아니라면 무난하게 사용할 수 있을 것으로 보인다.
CSS position:sticky | Can I use... Support tables for HTML5, CSS3, etc
Any ancestor between the sticky element and its user-scrollable container with overflow computed as anything but visible/clip will effectively prevent sticking behavior.
caniuse.com
참조
position | CSS-Tricks
The position property can help you manipulate the location of an element, for example:
css-tricks.com
728x90
반응형
'기술이 된 상상' 카테고리의 다른 글
| Vue.js v-html 사용하여 style 적용하는 방법 (0) | 2023.10.27 |
|---|---|
| MacOS NPM에서 Yarn으로 Package Manager 변경하기 (0) | 2023.10.01 |
| 마케팅 용어: DAU, WAU, MAU, MCU, ACU, PR, ARPPU, Stickiness (0) | 2021.10.06 |
| SEO를 위한 Meta Tags: 초보자 가이드 (0) | 2021.08.14 |
| [HTML] abbr 요소 by MDN (0) | 2021.07.01 |
