时间戳

首页 > 解决方案 > 子与父之间的显示元素

css - 子与父之间的显示元素

问题描述

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

#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 中完成。

提前致谢！

标签： csscss-positionz-index

解决方案

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

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

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

第三，您可能想要签出:before和:after伪元素。签出此链接。

推荐阅读