z-index 사용법에 대해 당신이 모르는 것
오늘의 콘텐츠를 시작하기 전에 다음 코드를 살펴보겠습니다.
<style type="text/css"><br> #div1,#div2{<br> width:200px;<br> height:200px;<br> background-color:red;<br> position: relative;<br> z-index:1;<br> }<br> #div2{<br> background-color:green;<br> z-index:0;<br> }<br> #div1_1,#div2_1{<br> width:100px;<br> height:100px;<br> background-color:black;<br> }<br> #div1_1{<br> position:relative;<br> z-index:-100;<br> left:80px;<br> top:140px;<br> }<br> #div2_1{<br> background-color:yellow;<br> z-index:999;<br> position: relative;<br> left:160px;<br> top:-50px;<br> }<br><br></style><body><br><div id="div1"><br> 我是div1<br> <div id="div1_1"><br> 我是div1_1<br> </div><br></div><br><div id="div2"><br> 我是div2<br> <div id="div2_1"><br> 我是div2_1<br> </div><br></div><br></body>
'
???실례합니다. div2_1의 z-index 값이 999인 이유는 왜 여전히 div1의 요소 수준보다 낮습니까? div1_1의 z-index 값이 -100인데 그래도 div1보다 높다고요? 당황하지 말고 천천히 내 말을 들어보세요.
우선, 어떤 것이 낯설 때 먼저 세 가지를 이해해야 합니다. 1. 이것은 무엇입니까? 2. 용도는 무엇입니까? 3. 사용 방법은 무엇입니까?
다음 세 단계에 따라 Z-색인 속성을 설명하겠습니다. 우선 첫째, 둘째, 이게 뭐죠? Z-index는 실제로 CSS의 일반적인 속성입니다. 직설적으로 말하면 웹페이지에 세 개의 div가 겹쳐서 아래에서 위로 표시되어야 하는 경우 주로 사용됩니다. 특정 순서, 어떻게 해야 합니까? 예, 일반적인 웹 개발에서는 2차원적이며 CSS는 더 나은 레이아웃을 돕기 위해 이 속성을 도입합니다.
두 번째로, 이 기능을 사용하는 방법에 대해 먼저 몇 가지 개념을 소개하겠습니다.
1. z-index 속성은 요소의 스택 순서를 설정합니다. 스택 순서가 높은 요소는 항상 스택 순서가 낮은 요소 앞에 옵니다.
2. 형제 요소의 경우 기본적으로 또는 position:STATIC의 경우 문서 흐름 뒤쪽의 요소가 이전
을 덮어씁니다.3. 동일한 레벨의 요소의 경우, 위치가 정적이 아니고 z-index가 존재하는 경우 z-index가 큰 요소가 z-index가 작은 요소를 덮고 z-index가 클수록 z-index가 커집니다. , 우선순위가 높을수록
4. ie6/7에서는 위치가 정적이지 않고 z-index가 존재하지 않으므로 z-index가 0입니다. 다른 브라우저에서는 z-index가 auto입니다.
5. z-index가 auto인 요소는 계층관계 비교에 참여하지 않습니다. 상향 순회부터 이 지점까지 z-index가 auto가 아닌 요소는 비교에 참여합니다
참고: position:static을 설정하고 position을 설정하지 않으면 요소는 동일하며 스태킹 수준에 영향을 주지 않습니다(다음 예에서는 이에 대해 더 이상 설명하지 않으며 후속 위치는 다음과 같이 정적이 아닙니다). 기본값)
몇 가지 예를 들어 설명하겠습니다.
1. Z-인덱스와 위치가 없는 요소의 스택 순서:
위 두 div의 stacking 규칙은 뒤쪽의 stacking 수준이 앞쪽보다 높다는 것입니다. 즉, 음의 여백을 사용하여 div2를 div1로 이동하면 겹치는 부분이 대신 div2로 표시됩니다. div1의 그러면 어떤 학생들은 이때 div2 뒤에 div3을 추가하면 어떻게 됩니까? 뒤에 div가 몇 개 있어도 레벨은 div2와 같을 것이고 div2보다 높지는 않을 것입니다
2. 위치는 관련되어 있지만 Z-index는 관련되지 않은 경우
예:
<style type="text/css"><br> /*定位规则,如果加position堆叠顺序优先，所以A此时变在B上面*/<br> #a,#b{<br> width:100px;<br> height:100px;<br> background-color:red;<br> }<br> #b{<br> background-color:green;<br> margin-top:-20px;<br> margin-left:20px;<br> }<br> #a{<br> position:relative;<br> }<br><br></style><body><br><div id="a"><br> 我是A<br></div><br><div id="b"><br> 我是B<br></div><br></body><br>然后你看到的是这样的情况：
这说明啥呢，虽然b元素在a的后面，但是a加了position之后，他的堆叠层级就变高了，跑到了b的上面<br>，所以我们利用这个规则在无z-index参与的情况下也可以实现三层堆叠，比如这样：
<style type="text/css"><br> /*定位规则,在没有z-index干扰的情况下也可以三个div也可以做出堆叠效果哦*/<br> #a,#b{<br> width:100px;<br> height:100px;<br> background-color:red;<br> }<br> #b{<br> background-color:green;<br> margin-top:-20px;<br> margin-left:20px;<br> }<br> #a_1{<br> width:50px;<br> height:50px;<br> background-color:blue;<br> position:relative;<br> left:80px;<br> top:50px;<br> }<br><br> </style><br></head><br><body><br><div id="a"><br> 我是A<br> <div id="a_1"><br> 我是A的子DIV<br> </div><br></div><br><div id="b"><br> 我是B<br></div><br></body>
3.有z-index参与的情况：<br>1.简单的堆叠：<br>#div1{<br>position:relative;<br>z-index:1;<br>}#div2{<br>position:relative;<br><br>}#div1{<br>position:relative;<br>z-index:0;<br>}<div id="div1"></div><br><div id="div2"><//div><br><div id="div3"></div><br>此时的层级顺序是，div1在最顶层，div2和div3均在第二层也就是最后一层。需要大家注意的一点，在position有值时，设置z-index为0和不设z-index是一样的。<br><br>2.相对复杂的堆叠（z-index的从父原则）：<br> 意思就是子元素首先要看看父元素有无z-index，就像最开始的例子，当两个父元素div1的z-index为1,div2的z-index为0时，div1的所有的子元素及自己的层级就会比div2及其子元素高，这也解释了为什么div2_1的z-index值设为999了都还是在div1的下面。讲到这，上述例子还有一个问题，div1_1我都设了z-index为-100了，为什么还是比div1高呢。有些同学会想，我就是想让背景黑色div1_1在父元素div1的下边怎么办呢，所以这里还有一个原则：当父元素有设置z-index时，那么他的子元素的层级一定会比他高，所以如果你想让一个子元素的层级在父元素之下，你一直设置子元素的z-index，都设置成了z-index 1000了都，没有效果，那么不妨看看父元素是否也被设置了z-index吧！
마지막으로 강조할 점은 z-index는 음수일 수 있다는 것입니다. 둘째, z-index의 값은 px가 없는 정수여야 합니다. z-index는 px이어야 합니다. 둘째, z-index를 사용할 때는 position 값이 고정되어 있는지, 절대적인지, 상대적인지에 상관없이 값이 정적인 수준에서는 동일합니다. 위치가 없는 레벨이 설정됩니다.
정리하자면, 위 예시는 매우 지저분해 보이고 실제 상황에서 어떻게 활용해야 할지 잘 모르겠습니다. 개인적인 경험으로 우선 직위가 있는지 살펴보고, 직위가 없으면 계층구조를 순서대로 살펴보세요. position이 있으면 z-index가 있는지 확인하고, 상위 요소의 하위 요소에 대한 z-index 값을 설정할 때는 상위 요소에 z-index가 설정되어 있는지 주의해야 합니다. 부모 요소는 자식 요소의 수준에 영향을 미칩니다. 이 점은 매우 중요하며 우리가 저지르는 가장 일반적인 실수이기도 합니다. 요소의 z-index 값을 최대 또는 최소로 설정할 때 작동하지 않으면 z-index의 상위 원칙을 완전히 이해하지 못한 것인지 확인하는 것이 좋습니다. 본 글과 관련없는 내용에 대해 이야기해보겠습니다. CSS 스타일은 모두 상속 가능합니다. CSS 상속에 대해 천천히 알아보는 시간을 갖는 것이 좋습니다.
<br><br>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작
Apr 18, 2025 am 12:09 AM
웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향
Apr 19, 2025 am 12:02 AM
HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.
HTML의 미래 : 웹 디자인의 진화 및 트렌드
Apr 17, 2025 am 12:12 AM
HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.
HTML vs. CSS vs. JavaScript : 비교 개요
Apr 16, 2025 am 12:04 AM
웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.
HTML : 웹 페이지 구조 구축
Apr 14, 2025 am 12:14 AM
HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.
HTML vs. CSS 및 JavaScript : 웹 기술 비교
Apr 23, 2025 am 12:05 AM
HTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.
HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?
Apr 15, 2025 am 12:13 AM
Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.
