Question

仅限CSS

我希望我的绝对定位div支持它（相对）父母，但仍然留在它的父母兄弟姐妹之上。因此，使用负z-index值对此无效...

这fiddle实际上与我正在寻找的相反：父div（左侧）应位于绿色子div的顶部，兄弟div（右侧）应位于其后面。

这里有什么想法吗？

Answer 1

见这里＆gt;的 jsfiddle

我还建议你为其中setVideo()的{{1}}添加不同的课程

喜欢：public void setImage(final Context c,final String imageUrl){ try { if (imageUrl!=null) { // Picasso.with(c).load(imageUrl).error(R.mipmap.add_btn).fit().centerInside().placeholder(R.mipmap.add_btn) .networkPolicy(NetworkPolicy.OFFLINE).into(imagePost, new Callback() { @Override public void onSuccess() { } @Override public void onError() { //Reloading an image again ... Picasso.with(c).load(imageUrl).error(R.mipmap.add_btn).placeholder(R.mipmap.add_btn) .into(imagePost); } }); } else { imagePost.setVisibility(View.GONE); } } catch (Exception e){ } } public void setVideo(final Context c, final String videoUrl){ try { if (videoUrl!=null) { try { Uri videoUri = Uri.parse(videoUrl); try { videoLayout.setVideoURI(videoUri); videoLayout.setTag(videoUrl); String hasVideo_string = (String) videoLayout.getTag(); boolean hasVideo = Boolean.parseBoolean(hasVideo_string); } catch (IOException e) { e.printStackTrace(); } } catch (Exception e) { System.out.println("Error :" + e); } } else { videoLayout.setVisibility(View.GONE); } } catch (Exception e){ } }，然后是CSS .container，所以你确定所有兄弟姐妹都有.inner

或以下代码段：

＆＃13;
＆＃13;
<div class="container parent">
＆＃13;
.parent ~ *{z-index:-2}
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用nth-child selector定位同一班级two different parent div的{{1}}，如下所示，

.container

.container:nth-child(1){
  display: inline-block;
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
}

.inner {
  top: 5px;
  left: -10px;
  right: -50px;
  bottom: -10px;
  background-color: green;
  position: absolute;
  z-index:-1;
}
.container:nth-child(2){
  display: inline-block;
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: red;
  z-index:-2;
  position:absolute;
}

Answer 3

您只需要为其提供z-index属性。 z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

.inner {
  top: 5px;
  left: -10px;
  right: -50px;
  bottom: -10px;
  background-color: green;
  position: absolute;
  z-index:1;
}

您可以看到演示here

其父母背后的CSS绝对孩子

3 个答案: