如何将div放在另一个div前面？

Question

我想阻止用户点击页面上的任意位置，只需在带有按钮的顶部div上。

＆＃13;

＆＃13;

.topdiv {
  height: 90px;
}

.divBlocking {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  cursor: wait;
}

＆＃13;

<div class="topdiv" *ngIf="!blockContent">
  <button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>

<div class="divApp">
  //application content/form/inputs
</div>

＆＃13;

＆＃13;

＆＃13;

所以整个屏幕都不可点击，包括tobdiv，而不是我想要的。改变divBlocking=>top: 90;似乎不起作用

Answer 1

使用topdiv和position: fixed;

更新z-index: 999;课程

＆＃13;

＆＃13;

.topdiv {
  height: 90px;
  position: fixed;
  z-index: 999;
}

.divBlocking {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  cursor: wait;
}

＆＃13;

<div class="topdiv" *ngIf="!blockContent">
  <button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>

<div class="divApp">
  //application content/form/inputs
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将z-index: -1添加到.divBlocking 这意味着将.divBlocking发送到后面。

为了显示差异，我添加了一些背景颜色。

原始代码结果如下

将z-index: -1添加到.divBlocking

已编辑的代码

.topdiv{
      height:90px;
      background-color: red;
    }
    .divBlocking{
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      cursor: wait;
      background-color:rgba(201, 76, 76, 0.3);
      z-index: -1;
    }

<div class="topdiv" *ngIf="!blockContent"> 
     <button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>

<div class="divApp"> 
     //application content/form/inputs
</div>

Answer 3

我对CSS的理解是，您可以使用z-index

确定元素的堆栈顺序

  

在最基本的情况下，HTML页面可以被认为是二维的，   因为文本，图像和其他元素都排列在页面上   没有重叠。在这种情况下，有一个渲染流程，   所有元素都意识到他人占用的空间。 z指数   属性可让您调整对象分层的顺序   渲染内容。

Understanding the z-index