css position, z-index, nth-child

position

static : 기본값 relative : 자기기준 (부모영역 안의 자신의 영역부터. padding영역 포함) absolute : 부모요소 기준 (부모영역 시작점에서 기준으로) fixed : 뷰포트 기준 (최단, 스크롤해도 그 위치에 고정됨) ex) 모바일 메뉴에서 스크롤 해도 따라다니는 버튼을 만들때 사용 sticky : 스티키 스크롤 (익스플로어, 하이브라우저에서는 작동 X)

---

 

z-indx

수치가 클수록 앞쪽으로 표현된다. -부모레이어 속성에 position 속성이 설정이 되어야만 사용 가능. ex) 주로 상단 메뉴바에서 hover, click했을때 main내용보다 위로 올라가야하니까      sub-title들이 나오는 레이어에서 z-index 999 크게 넣어버림.

 

---

 

nth-child

<div class="item-lists">     <div class="item">    1번 item 내용~   </div>    <div class="item">    2번 item 내용~ or 짝수 내용~   </div> </div>

.item:nth-child(원하는 차례 숫자) .item:nth-child(odd) 홀수  .item:nth-child(even) 짝수 .item:nth-child(2n) .item:nth-child(3n)  ex) 유지보수할때 이 부분 제대로 안되어 있으면 당황스럽습니다..      개발할때 생각해서 넣어주기.