一日回家
女儿：嘿，爸爸！
Wai：“哦，怎么了？我的女儿”
女儿“HTML和CSS对话我要你教我怎么做”
怀“哦，是的”
Wai “我现在正在做 Wai 的个人博客。”
Wai：“我要做一个对话，所以我会告诉你怎么做。”
女儿：“哇，谢谢！”
女儿：“我在使用z-index时遇到问题！”
Wai “哦，是时候交给爸爸了！”
围“爸爸z-index完全理解因为我愿意！ ”
z-index完全明白，开始讲解
Wai：“你现在正在做这样的网站吗？”
Wai "↑我希望能够在这个网站上显示对话框。"
“你的文章已经发了。”
Wai "↑ 显示此类消息的对话框"
女儿：“我明白了。”
Wai “Honah，让我们写代码吧”
Wai：首先，现在的代码是──<body> <header> <h1>やめ太郎のサイト</h1> </header> <main> <section> <h2>記事一覧</h2> <ul> <li> <article> <h3>記事タイトル</h3> <p>記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。</p> </article> </li> <!-- 〜以下省略〜 -->围“↑这样”
Wai “在此处添加对话框的 HTML。”<body> <header> <h1>やめ太郎のサイト</h1> </header> <main> + <div id="dialog-area"> + <p>z-index完全に理解した。</p> + </div> <section> <h2>記事一覧</h2> <ul> <li> <article> <h3>記事タイトル</h3> <p>記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。記事の内容。</p> </article> </li> <!-- 〜以下省略〜 -->围“↑这边”
Wai “那么，接下来写 CSS。”#dialog-area { + position: fixed; + z-index: 1; padding-top: 57px; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); }围“↑寇亚”
Wai “Honah，用浏览器检查操作！”怀“啊！？”
女儿：“对话在标题后面。”
围“赛亚娜……”
女儿：“大约10%的字符被隐藏了”
怀“哦……”
Wai ``是不是说你隐瞒10%左右也能赚钱？''
围90似乎只有大约 % 的人理解z-index..."女儿：“是的……”
阳太郎：（是这样吗……！？）
去找原因
女儿：哦，爸爸！
女儿：“我知道！”header { position: fixed; z-index: 10; /* 〜省略〜 */ }女儿：↑标题里的
z-index是10，对吧？
女儿：“还有——”#dialog-area { position: fixed; z-index: 1; /* 〜省略〜 */ }女儿：↑对话部分的
z-index变成了1！
女儿：“不是这个原因吗？”” 哦，不愧是我女儿！”
Wai “Honah，把对话部分的z-index改成11！”#dialog-area { position: fixed; - z-index: 1; + z-index: 11; /* 〜省略〜 */ }Wai “↑原来是这样！”
” Wai “Honah，再次检查浏览器的操作！”围“咕噜噜……”
卫“为什么……”
Wai “Wai 应该完全理解z-index...！”女儿：“爸爸，没办法……！”
女儿：“当然完全理解期后 ”
女儿”未知时期我冲了进去！ ”卫“哦，是这样吗……”
Wai：“Wai也进步了一步！”阳太郎“不，为什么不呢？”
阳太郎：“你就是什么都不懂。”怀“哦……”
围“赛亚娜……”米太郎先生开始解说
阳太郎 "
z-indexHana"
阳太郎”父元素之间的战斗如果我输了，我很抱歉。”Wai：“父元素之间的战斗……什么意思？”
阳太郎：“在这个例子中——”
<body> <header> <h1>やめ太郎のサイト</h1> </header> <main> <div id="dialog-area"> <p>z-index完全に理解した。</p> </div> <section> <h2>記事一覧</h2> <!-- 〜以下省略〜 -->Yometaro: ↑ 这里，
header和main元素是兄弟变成了围“赛亚娜”
阳太郎「那么——」
header { position: fixed; z-index: 10; /* 〜省略〜 */ }Yometaro：↑这就是
header元素z-index变成10的方式main { position: relative; z-index: 0; /* 〜省略〜 */ }Yometaro：↑这就是
main元素z-index变成0的方式
阳太郎“这就是原因”魏：“什么意思……？”
阳太郎“也就是说——”
header元素···z-index: 10main元素···z-index: 0
- 对话框部分是
main元素的子元素，也无法击败header元素阳太郎《↑这种事》
怀：“原来如此……！”
围：“親要素どうしの戦いで負けてたらアカン”
外：“你是这个意思吗……！？”女儿：“好！”
女儿：“好吧，这是你应该做的！”<body> <header> <h1>やめ太郎のサイト</h1> </header> + <div id="dialog-area"> + <p>z-index完全に理解した。</p> + </div> <main> - <div id="dialog-area"> - <p>z-index完全に理解した。</p> - </div> <section> <h2>記事一覧</h2> <!-- 〜以下省略〜 -->女儿：“将 ↑ 对话框部分从
main元素中取出。”
女儿：“我试着和header做兄弟！”围“哦”
女儿：“
z-index的号码是——”header { position: fixed; z-index: 10; /* 〜省略〜 */ }#dialog-area { position: fixed; z-index: 11; /* 〜省略〜 */ }女儿：“对话部分比较大，这样不行吗！？”
Wai：“好，我们在浏览器中查看！”
Wai：“哦，是的，感觉就是这样！”
卫“这就是我想做的！”概括
- 如果
z-index父元素输了，子元素也输了
- 如何不输
- 不要让你的父元素输掉
z-index的战斗- 或成为兄弟元素
z-index并赢得战斗女儿：“原来如此！”
“赛亚娜！”
Wai：对于你想在前台显示的元素，比如对话框，直接写在body下可能是个好主意！阳太郎“赛亚娜”
Yometaro：“最好是在外面尽量做一个HTML标签，不受父元素胜负影响。”
阳太郎“如果反应门户网站和”
阳太郎“如果 Vue传送使用 (PortalVue)
Yometaro ``这很好，因为您可以将元素放在外面。''怀：“哦，我明白了。”
洋太郎：另外，指定
z-index时，别忘了指定position。
Yometaro ``如果不指定position，将被视为默认position: static;。''
Yometaro“即使您在position: static;的状态下指定z-index，它不起作用”
Yometaro：“relative，absolute，fixed，sticky，你不能指定。”Wai：“哦，想想看，你做到了。”
女儿：“妈妈，太棒了！”
一天中的夜晚
Wai：“嗯，我今天也学到了很多。”
哇“哇，你又长大了”
围完全理解超过”
围我不明白甚至超越
围乔特基鲁你可能已经达到”女儿：“哇！”
女儿：“爸爸，CSS Chotdekiru！Chotdekiru！”阳太郎“不，在现实生活中可以做一点只有颜”
〜结束〜
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308626371.html