relative absolute 해결할 수 없는 레벨 문제 해결 페이지 1/3
-
-
-
-
-
만약 내가 LI를position:relative로 설정한다면span을position:absolute로 설정하기;그러면 우리는 SPAN의 z-index 값이 아무리 높아도 영원히 뒤의 부급 아래에 있다는 것을 발견할 수 있다.
*{margin:0; padding:0; list-style:none;}
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}
시험해 보면 우리의 하위 단계를 쉽게 발견할 수 있다. z-index의 값이 1000에 달하는position:absolut가 설정되어 있다.자급은 모두 부급 아래에 묶여 있다.나는 오랫동안 생각했는데 그 근본적인 문제는 같은position:relative/absolute를 설정하는 것이다.동급 라벨 사이의 등급은 z-index로 초월할 수 없습니다.우리의 상기 예에서 첫 번째 LI의 등급은 영원히 다음 LI의 등급보다 작아야 하기 때문에 우리는 LI의 하위 등급에position:absolute를 설정했다.아주 높은 z-index 값을 줬어요.
아마도 너는 이렇게 생각할 것이다. 스핀이 있는 LI에 대해position:relative를 설정하면.그러면 되지 않을까요?아주 정확합니다.다른 LI에서position:relative를 설정하지 않는 경우그러면 우리가 필요로 하는 그 자급은 모든 내용 위에 떠오를 수 있다.그러나 실제로 모든 LI에 스폰이 있어야 하고 속성이 똑같아야 한다면 어떻게 해야 합니까?물론 우리는 이런 효과가 필요하지 않다.그러나 우리는 이러한 효과가 필요하다. 하위 레벨은 모두 숨겨져 있고 마우스 반응이 있을 때 나타나 모든 내용 위에 떠 있다.우리는 이것이 확실히 골치 아픈 일이라는 것을 알아야 한다. 왜냐하면 우리는 위에서 보았기 때문이다. 자급이 표시될 때 모두 다음 부급 라벨 아래에 눌려 있기 때문이다.다음은 이 마우스 반응의 위치 추적 효과를 실현해 보겠습니다.
링크된 마우스 이벤트를 통해 이 디스플레이 숨기기 효과를 완성합니다.
*{margin:0; padding:0; list-style:none;}
li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
li a {position:relative; z-index:1; display:block; height:100px; width:100px; background:#000;}
li a:hover {background:#000000;}
li span {display:none;}
li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}
1, 2, 3 다음 페이지 전체 텍스트 읽기
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
