[수업노트](20.10.23)D+11 display:none/position/z-index

1. (CSS) display-none

  - 사라진다

 - div:nth-child(2): 두번째자식이면서 div인 엘리먼트
 - div:nth-of-type(2): div중에서 두번째 엘리먼트
 - a ~ div: 동생선택자(부모, 형 선택자는 없음)
 - a + div: 인접동생 선택자

<a href="#">버튼</a>
<div>안녕</div>
<div>잘가</div>

a + div {
    display:none;
}
a:hover + div {
    display:block;
}

버튼에 커서를 올리면 디스플레이 none이던 내용들이 나타난다

---

2. (CSS) position

	static	relative	absolute	fixed
너비	유지		최대한 줄어든다
본질	사람	사람,유령의 집	유령,유령의 집	유령,유령의 집 스크롤바 따라다님
겹침	불가능(주변 영향을 줌)		가능(주변 영향을 주지 않음)
이동	-		top, left, right, bottom으로 이동

- absolute: 유령화

               top,bottop,left,right 값으로 위치 지정가능
               부모 엘리먼트의 넓이에 구애받지 않고 전체 화면기준이 된다(포토샵 레이어 개념과 비슷) 

               디스플레이 블럭이더라도 넓이가 최소화 된다
* 응용: 이미지에 검은 필터를 넣거나 이미지위에 겹치는 아이콘 등을 넣을 수 있다

- static: div포지션 속성의 기본값이며 겹치지 않는다 
- relative: 유령의 집화. 부모엘리먼트에 relative를 주면 집 나간 유령이 돌아온다ㅋㅋㅋ

- width, margin-left, margin-right : 세 속성에 auto이외의 값을 동시에 지정했을때 적용되지않듯이,
- top, bottop, height: 세 속성에 auto이외의 값을 동시에 지정했을때 적용되지 않는다
- left, right, width: 마찬가지이다

---

3. (CSS) z-index

- 기본값 0, 높을수록 상단에 배치된다