매우 이상한 HTML 동작을 발견했습니다. 일반적으로 다른 요소 (예 : div) 뒤에 숨겨진 확인란은 불투명도 또는 컨테이너의 불투명도가 1 미만으로 설정되면 표시됩니다.
기본 설정은 다음과 같습니다. 회색 div 뒤에 체크 박스 세트가 있습니다.
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>예상대로 체크 박스를 볼 수 없습니다. 그러나 불투명도 또는 컨테이너의 불투명도를 변경하면 표시됩니다.
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>물론 z-index회색 div를 설정하여이를 피할 수 있습니다 .
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
z-index: 10;
}<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox" style="opacity: 0.5">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>따라서 해결책은 분명하지만 그럼에도 불구하고 여전히 질문이 있습니다. 왜 그런 일이 처음에 일어 났습니까? 첫 번째와 두 번째 스 니펫이 다른 이유는 무엇입니까?
그건 그렇고, 첫 번째 단락에서 언급했듯이 불투명도가 1로 설정되면 확인란이 숨겨진 상태로 유지된다는 점을 언급 할 가치가 있습니다.
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}<div class="container">
<div class="tooltip"></div>
<div class="checkboxes">
<div class="checkbox">
<label>
<input type="checkbox">
<span>Foo</span>
</label>
</div>
<div class="checkbox" style="opacity: 1">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Baz</span>
</label>
</div>
<div class="checkbox" style="opacity: 1">
<label>
<input type="checkbox">
<span>FooBar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>FooBaz</span>
</label>
</div>
</div>
</div>이는 opacity새로운 스택 컨텍스트를 발생시키기 때문 입니다. 이는 다음 CSS 속성에서도 발생할 수 있습니다.
규칙 8.2 : 불투명도가 1 미만인 모든 불투명도 하위 항목은 트리 순서로 원자 적으로 생성 된 스택 컨텍스트를 만듭니다.
.checkboxes {
display: flex;
}
.tooltip {
position: absolute;
width: 300px;
height: 20px;
background-color: #ccc;
}<div class="container">
<div class="tooltip"></div><!-- own stack context and above the other elements -->
<div class="checkboxes">
<div class="checkbox" style="opacity:0.5"><!-- own stack context and later on the painting order than position -->
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span>Bar</span>
</label>
</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다