当两个元素具有固定位置时，z-index 失败答案

【问题标题】：z-index fails when two elements have a fixed position当两个元素具有固定位置时，z-index 失败
【发布时间】：2016-06-10 08:03:15
【问题描述】：

我有两个固定元素（聊天框和 Cookie 广告）即使我添加了 z-index 也无法正确定位

风格

聊天：

bottom: 0;
position: fixed !important;
right: 40px;
z-index: 9998;

Cookie：

background: #000000 none repeat scroll 0 0;
bottom: 0;
box-shadow: 0 0 10px 0 #ffffff;
color: #fff;
font-family: arial;
font-size: 14px;
left: 0;
line-height: 1.3em;
opacity: 0.5;
position: fixed;
text-align: center;
width: 100%;
z-index: 9999;

更多详情，您可以在此页面上找到： http://www.backlabel.com/

HTML 太长，无法粘贴到那里复制..

【问题讨论】：

您是否尝试将父元素设置为relative定位？
对不起，我想先显示 cookie，然后你关闭它，聊天仍然存在。
@fruitjs 我猜他想让它们一个在另一个之上
那些 div 是兄弟姐妹？如果它们在另一个 div 中与其他 z -index 设置什么值无关，它们必须在 DOM 中处于同一级别
您需要将这些元素移动到相同的包含父元素中，例如：将 #slide_chat_window 移动到 #footer .row 将解决此问题。

标签： css css-position z-index fixed

【解决方案1】：

如果您想要聊天上方的 cookie div，请将较高的 z-index 设置为 .footer-container div

【讨论】：

这是问题所在！谢谢！
@SashaUeChirico (offtopic) “这是问题所在”:) “这是问题所在”是个问题 ;)
@Dwza 谢谢 :)

【解决方案2】：

Z-index 对于位置固定的两个子元素来说工作得非常好。您只需要检查元素的层次结构级别。

【讨论】：

【解决方案3】：

对于 z-index，子元素总是从其父元素继承 z-index，所以我的解决方案是您应该查看这些 div 的父元素。

【讨论】：