子项和父项之间的显示元素 [重复]

Question

我正在尝试在两个嵌套元素之间呈现一个元素。这可能最好用一个例子来解释：

#parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  
  z-index: 0;
  
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent">
  <div id="child"></div>
</div>

<!-- I want to have this element in between the "parent" and "child". -->
<div id="other"></div>

在这种情况下，我希望将绿色（“#other”）元素呈现在（z 深度方向）红色父元素（“#parent”）和蓝色子元素（“#child”）之间。换句话说，我希望蓝色元素位于顶部。

据我了解，这是不可能使用 CSS 的 z 深度（就像我尝试过的那样），因为元素是嵌套的，但我似乎无法找到不同的方式。

如果可能的话，我想保持 HTML 的原样，并完全在 CSS 中完成。

提前致谢！

Answer 1

刚刚从#parent 中删除了position:fixed。您可以为#parent 添加position: static;。

请查看此演示：https://codepen.io/anon/pen/dwZRMe

Answer 2

你的问题还不清楚，所以我会推荐现有的解决方案。

首先，如果你不想接触 html，你可以使用 js 来移动元素。参考this链接。

其次，这种功能与元素的wrapping密切相关。这也存在于jquery 中。

第三，您可能想查看:before 和:after 伪元素。查看this 链接。

Answer 3

嵌套对z-index 起着重要作用。 如果#other 元素位于#parent 元素之上，则#parent 的#child 元素永远不能高于@987654326 @ 元素。这是z-index 的重要规则。

在这种情况下，您可以通过以下方式更改您的 HTML 代码来创建您想要的形状。

#parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  
  z-index: 0;
  
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent">
  <div id="child"></div>
  <div id="other"></div>
</div>

#parent {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  
  z-index: 0;
  
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent"></div>
<div id="child"></div>
<div id="other"></div>

编辑：要保留 HTML，无需为 #parent 使用任何 position 样式并删除其中的 top|left|z-index 值。

#parent {
  width: 200px;
  height: 200px;
  background-color: red;
}

#child {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  
  z-index: 2;
  
  background-color: blue;
}

#other {
  position: fixed;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  
  z-index: 1;
  
  background-color: green;
}

<div id="parent">
  <div id="child"></div>
</div>
<div id="other"></div>