Question

目前我试图建立一个系统，一旦发生某些事情，当前div上会有一条很大的div和错误消息，表示用户无法再与父div交互。

我尝试这样做的方式（在父元素的子元素中）添加了一个position: absolute;和top: 0; left:0，但这只是使所有奇怪的对齐并且破坏了div的流程和构建

所以我的问题是，有没有更好的方法来显示另一个div的div，例如，我可以使它的不透明度为0.8，并且能够透过它看到它背后的整个div ，有点像z-index: 1;。

JSFiddle：https://jsfiddle.net/331nr1L0/

Answer 1

您可以将父位置设为相对位置，然后在子项上设置绝对位置。我需要看到更多关于如何像你提到的那样奇怪对齐的例子。

＆＃13;

.parent {
   width: 100%;
   height: 200px;
   background-color: lightgrey;
   border: solid black 1px;
   border-radius: 3px;
   position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsla(270, 100%, 50%, .4);
}

＆＃13;

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

＆＃13;

在此处更新了您的jsfiddle：https://jsfiddle.net/331nr1L0/1/

Answer 2

如果您愿意，可以使用您提到的透明度，只需记住对父div进行的css更改将落入子div，除非您通过为子节点中的相同选项指定其他值来覆盖它们。 EG

.parent {
   width: 100%;
   height: 200px;
   background-color: lightgrey;
   border: solid black 1px;
   border-radius: 3px;
   opacity:0.5;
}

.child {
  opacity:1;
}

Answer 3

如果你想让它与父母重叠，我也会调整边距。

更改您想要的颜色，这应该可以解决问题（作为其他响应的替代方法）

在这里，孩子有一个虚线的白色边框（将其改为实心，你想要的任何颜色）

.parent {
  width: 100%;
  height: 200px;
  background-color: lightgrey;
  border: solid black 1px;
  border-radius: 3px;
}
.child {
  border: 5px dashed white;
  border-radius: 3px;
  background-color: red;
  opacity: 0.4;
  height: 210px;
  width: 110%;
  top: -10px;
  left: -10px;
  margin: -10px;
}

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

试图将子div放在父div上

3 个答案: