프론트엔드/css
[유노코딩 css 13강] position 속성 중 fixed,sticky
응개야
2023. 8. 3. 21:25
position 이렇게 배치할게~ 기본값은 static
top 윗면에서부터 얼마큼 떨어뜨린다
right 오른쪽기준 얼마큼 떨어뜨린다
bottom 아랫면에서부터 얼마큼 떨어뜨린다
left 왼쪽면에서 얼마큼 떨어뜨린다
이번에 배울 값들은 배경색으로 칠해놨음.
static 기본값
relative 자기 원래 위치 값에 따라 오프셋 적용
absolute 상위 요소 (가장 가까운 포지션 지정 요소) 기준으로 어찌보면 상대적으로. 오프셋을 적용
fixed 지정한 위치 고정 스크롤 이동에도 꼼짝 않는다.
sticky 스크롤 되는 가장 가까운 상위 요소에 오프셋 적용
fixed 속성을 쓰면
고정이 되어있어
div 값이 많아서 스크롤 되더라도 정해진 위치에 움직이지 않고 고정되어있음.
top을 0px;로 준다면?
<div>
첫번째
<div class="pos"></div>
<div>
두번째
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pos{
width: 200px; height: 200px;
background: tomato;
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<div>
첫번째<br/>첫번째<br/>첫번째<br/>첫번째<br/>
첫번째<br/>첫번째<br/>첫번째<br/>첫번째<br/>
첫번째<br/>첫번째<br/>첫번째<br/>첫번째<br/>
첫번째<br/>첫번째<br/>첫번째<br/>첫번째<br/>
첫번째<br/>첫번째<br/>첫번째<br/>첫번째<br/>
첫번째<br/>첫번째<br/>첫번째<br/>첫번째<br/>
</div>
<div class="pos"></div>
<div>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
두번째<br/>두번째<br/>두번째<br/>두번째<br/>
</div>
</body>
</html>
스크롤 이동해서 더이상 상위 요소인 첫번째 div가 보이지 않지만
sticky이기떄문에 맨 위에 착 달라붙어있음
스크롤 내리면 당연히 첫번째와 두번째 사이로 남아있지만
스크롤 올리면 첫번째가 가버리니까 따라가려고 발버둥임
신기하고 재밌음 이건 꼭 해봐야해
