position 속성에 대한 지식은 absolute에서 멈춰져 있던 상황.
absolute의 기준점이 상위의 relative를 통해 정해지고 아니면 root 요소라는 것.
fixed는 그냥 absolute로 해결이 안되면 사용하는게 전부.
sticky 사용해보고 잘되면 사용 안되면 될 때까지 삽질.
이번에도 sticky를 사용하며 결국 기술부채를 해결하기로 했다.
그래서 absolute, fixed, sticky는 어떻게 다른가
static
left
, right
, top
, bottom
, z-index
은 영향을 주지 못한다.static
끼리는 나중 선언된 요소가 위로 올라온다.(z-index
가 적용되지 않기 때문에)static
의 z-index
는 기본적으로 0이다.
relative
left
, right
, top
, bottom
, z-index
가 동작한다.static
+relative
인 경우 위치 속성이 나중에 적용되기 때문에 relative
가 항상 위에 올라온다.
absolute
relative
로 정의된 부모 요소이다.relative
로 정의된 부모가 없으면 document(root 요소)를 기준으로 한다.
fixed
absolute
포지션과 같이 문서 흐름에서 제거된다.fixed
요소는 absolute
와 거의 동일하게 동작한다. 다만 기준점은 특정 부모요소가 아니라 viewport를 기준으로 한다.
sticky
relative
와 fixed
의 중간쯤 되는 정의relative
요소와 같이 처리된다.fixed
처럼 취해진다.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
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 |