-
CSS 속성 positionCoding 2022. 5. 29. 16:30
css를 이용해 position 값을 사용하다보면 주로 사용하는 값은
static, relative, avsolute, fixed 이다.
sticky의 경우엔 IE(익스플로어)에선 지원을 하지 않는 속성이기 때문에 평소 사용하는데 어려움이 있다. 하지만 IE의 점유율이 줄어들고 IE를 고려하지 않는 작업이 많아지고 모바일 작업을 중점으로 하는 경우 sticky 알아두면 좋다.
개념
단어에 뜻에서 알 수 있듯이 속성값을 선언한 영역의 위치값을 고정시켜주는 역할을 한다.
<style> .wrap{height:500px; overflow:hidden; overflow-y:scroll;} .inner{height:200px; background:skyblue;} .box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;} </style> <body> <div class="wrap"> <div class="inner"> <div class="box"></div> </div> </div> </body>
속성값 적용 예#1 위의 소스로 출력하면 검은색 상자모양의 영역이 스크롤할때 고정되어 노출된다.
주의할 점은 position : sticky 를 사용하면 top, left와 같은 위치값을 반드시 작성해줘야 sticky 속성을 적용할 수 있다.
fixed와 sticky의 차이와 특징
<style> .wrap{height:500px; overflow:hidden; overflow-y:scroll;} .inner{height:100px; background:skyblue;} .inner2{height:100px; background:#0f9d58;} .box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;} </style> <body> <div class="wrap"> <div class="inner"> <div class="box"></div> </div> <div class="inner2"></div> </div> </body>스크롤의 위치가 sticky 처리를 한 검은색 박스 영역의 .inner 영역을 벗어나고 .inner2 영역으로 스크롤이 넘어가자 .box 영역은 스크롤을 따라오지 않는다. .inner의 끝부분에 걸린다.
sticky 선언 영역의 요소에서만 고정됨
fixed는 페이지 전체 영역을 기준으로 고정이 됨
absolute의 적용
다음과 같이 적용
<div class="parent"> Parent <div class="child">Child #1</div> <div class="child">Child #2</div> </div>
속성값 적용 예#2