positioning중 sticky 부모 관련 질문입니다!
조회수 1290회
sticky는 부모를 찾지 않는다고 하셨는데 강의 예제 중에
.box-gruop .box{ position: sticky; top: 0; }
이 부분에서는 박스 안에서만 되더라구요! 이부분이 궁금해서요~
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
sticky는 평소에는static처럼 있다가 변경된 오프셋값이 다다르면fixed처럼 고정됩니다. 따라서 오프셋값에 걸리지 않으면,static상태로 보일 수 있습니다. 그러다가 지정한 오프셋에 위치하고 나서부터 계속 그 위치에 고정됩니다. 박스 안에서만 된다는건 아마 오프셋값을 더 극단적으로 변경해보면 이해하는데 도움이 될거에요.<!DOCTYPE html> <html> <head> <style> body {font-size: 16px;line-height: 24px;color: white;} div {padding: 8px;} .wrapper { display: block; height: 1000px; margin-top: 160px; background-color: #CFD8DC; } .fixed{ position: fixed; background-color: #3F51B5; right: 40px; top: 40px; } .sticky{ display: inline-block; position: sticky; background-color: #FF5722; left: 400px; top: 80px; } </style> </head> <body> <div class="wrapper"> <div class="sticky"> sticky는 부보 요소의<br> position값이 무엇이지 관계없이<br> static하게 위치하다가<br> 오프셋에 위치하게되면 위치가 고정됩니다. </div> <div class="fixed"> fixed는 부모 요소 중<br> static이 아닌 요소를 찾아,<br> 그 기준으로 위치를 잡습니다.<br> </div> </div> </body> </html>-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력