We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1. 在同一个层叠上下文中,z-index的大小不等时,谁大谁在上;相等时,在DOM流中处于后面的元素会覆盖前面的元素
z-index
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { font: 12px Arial; text-align: center; opacity: 0.7; } .bold { font-weight: bold; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { z-index: 5; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { z-index: 4; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { z-index: 4; position: absolute; width: 150px; height: 350px; top: 10px; left: 80px; border: 1px dashed #990000; background-color: #ffdddd; } #nordiv1 { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } </style> </head> <body> <div id="reldiv1">DIV#1 RELATIVE z-index 3</div> <div id="reldiv2">DIV#2 RELATIVE z-index 5</div> <div id="absdiv1">DIV#3 ABSOLUTE z-index 4</div> <div id="absdiv2">DIV#4 ABSOLUTE z-index 4</div> <div id="nordiv1">DIV#5 NORMAL z-index 8</div> </body> </html>
2. 如果一个盒子设定了一个position,但没有指定z-index或z-index设置为auto,此时盒子不会创建一个新的本地堆叠上下文,在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同
position
auto
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> div { font: 12px Arial; text-align: center; opacity: 0.7; } .bold { font-weight: bold; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { z-index: 4; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #nordiv1 { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } .wrap { position: relative; } #wrap-absdiv1 { z-index: 99; position: absolute; width: 250px; height: 250px; top: 10px; left: 80px; border: 1px dashed #0829e2; background-color: #4e72a8; } </style> </head> <body> <div id="reldiv1">DIV#1 RELATIVE z-index 3</div> <div id="absdiv1">DIV#2 ABSOLUTE z-index 4</div> <div id="nordiv1">DIV#3 NORMAL z-index 8</div> <section class="wrap"> <div id="wrap-absdiv1">.wrap DIV#4 ABSOLUTE z-index 99</div> </section> </body> </html>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
1. 在同一个层叠上下文中,
z-index
的大小不等时,谁大谁在上;相等时,在DOM流中处于后面的元素会覆盖前面的元素2. 如果一个盒子设定了一个
position
,但没有指定z-index
或z-index
设置为auto
,此时盒子不会创建一个新的本地堆叠上下文,在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同The text was updated successfully, but these errors were encountered: