1. a태그 마우스 포인터 가려지는 현상 (슬라이드에서 a태그)
이유 >
상위 태그의 z-index와 css 우선순위로 a태그 포인터가 가려짐 (a태그 모양은 보임)
header (position안줬음) ,슬라이드(mobile) 와 겹쳐서 z-index 준 상황( slide가 뒤로 가게끔)
해결 방법>
z-index : 10;
section에 z-index : -1 ;
-> 태그 뒷편으로 감
연산자 우선순위
body에 백그라운드 없어서,,
display: flex; 주면 a태그 뒤로 감.
부모요소에 display : flex;
부모 요소중에 display:flex 준 태그 < z-index:-1값인 태그
html >> 부모1{부모2{a1 a2}}
1) flex 없을 때, 위에 쌓이기 때문에 z-index 맨 아래로 감.
2) 부모 요소>부모 2에 flex 와 자식 z-index:-1 = 부모2 아래로 자식이 갔다.
3) 부모1 , 부모2 둘다 flex이고 자식에 z-index:-1주면 안보인다. >>
=> 결론 :
부모: position : relative 자식: position: absoulte; 주는 작업 필요
z-index
position(relative, absolute, fixed) 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.
- 가장 아래 ( 사용자로부터 가장 멀다) z-index: -1
- auto : 기본값으로 z-index를 지정하지 않은 것과 같음
- position: static; 아닌 요소끼리 겹칠 수 있다.
- 기본으로 마지막 요소 제일 위
position 속성이 없는 태그들은 나오는 순서대로 쌓입니다.
position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓입니다.
position 속성에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓입니다.
하지만 z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선
쌓임 맥락(stacking context)
- 자식 엘리먼트들의 z-index 속성 값은 오로지 부모 안에서만 의미를 가짐
- 부모가 갖고있는 z-index값이 높다면, 자식의 z-index값이 더 높아도 부모의 쌓임 순서를 따른다.
2. 너비 계산
50 vw (화면의 너비)
margin: 120px calc(490px - 50vw) 0;
padding: 37px calc(50vw - 490px) 0;
padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다.
calc(490px -50vw)
margin - 요소의 네 방향 바깥 여백 영역을 설정
3. 슬라이드 효과
네이버 8장 -> 다른 페이지 갔다가 들어오면 랜더링 시간 일정하지 않음.
추가
details
정의 및 특징
부모 display 일때,
grid /flex 는 z-index:-1;일때 무시.. 음수로 안넣는게 좋다
