当前位置：文江博客话题详情

在单个页面上使用多个 z 索引

发布于 2024-12-09 23:41:16 字数 201 浏览 1 评论 0原文

这很难解释，所以我将简单地展示我的 jsFiddle 尝试。我希望橙色容器位于页面上所有内容的最后面。然后，我希望横幅位于橙色容器的顶部，但位于两个白色 div 容器的后面。

您可以在此处查看我的尝试，

感谢您的帮助！

埃文

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提笔书几行 2024-12-16 23:41:16

不完全确定你的意思。顺序和里面的内容有很大的不同，所以只向我们展示两个 div inst 很有帮助。但这是你的意思吗？

<div class'mainContainer'>
     <div class=orange'></div>
     <div class='banner'></div>
     <div class='div1'></div>
     <div class='div2'></div>
</div>

按照这个顺序，你就不需要 z-index 了。在 html 中，一个元素位于其父元素和前一个兄弟元素之上。当我们想要改变它时，我们使用 z-index 。

如果您的结构不同，请发布。

回复你的第一条评论
同样的原则也适用。后面的元素位于前面的元素之上。所以它们是从下到上：橙色、横幅和两个 div。然后按顺序添加它们。另外，我之前没有指出负值的 z-index 不允许用户与元素交互。即他们将无法选择或单击具有负 z 索引的任何内容。
一般来说，有关 html/css 的信息，您应该检查 w3cschools。这是关于 z-index 的链接
http://www.youtube.com/watch?v=C_CDLBTJD4M&feature=player_embedded 作为另一个人发布的内容，为了使 z-index 发挥作用，它需要是 position:absolute、position:relative 或位置：固定；

not sure entirely what you mean. the order and what is inside what, makes a huge difference so only showing us two of the divs inst helpful. but is this what you mean?

<div class'mainContainer'>
     <div class=orange'></div>
     <div class='banner'></div>
     <div class='div1'></div>
     <div class='div2'></div>
</div>

with that order you wouldn't need z-index. in html an element is on top of its parents and previous siblings. we use z-index when we want to change this.

if your structure is different pls post it.

in reply to your first comment
same principle applies. the latter elements are on top of the previous ones. so for them to be bottom to top: orange, banner, and two divs. then just add them in that order. Also I didn't point out before z-index with a negative value don't allow the user to interact with the element. i.e they will not be able to select or click anything inside whatever has a negative z-index.
generally for info on html/css you should check w3cschools. heres a link about z-index
http://www.youtube.com/watch?v=C_CDLBTJD4M&feature=player_embedded as another person posted in order for z-index to work it needs to be position:absolute, position:relative, or position:fixed;

回复收藏 0 原文