html - 如何使用 HTML 和 CSS 将一个 div 重叠在另一个 div 上

Question

我试过 z-index :-1 和 position:absolute 都没有工作。

如何解决问题。

是否有任何其他替代方法可以重叠。

<div *ngIf="allFiltersData.length > 0">
    <div style="width: 100%;">
        <div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0 (click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>

        <div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
            <div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
                <input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
                <input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
            </div>
            <div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
                <input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
                <label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
            </div>
            <br>
        </div>
    </div>
</div>

<div id="OverlapThisSection" style="position:absolute">
    <div>

    </div>
</div>

我正在使用上面的代码。

id 的 divOverlapThisSection需要重叠。我已将带有名称的 Div 设置htmlMultiSelect 为position:absolute

具有 id 的 DivOverlapThisSection不会被上面的另一个 Div 重叠。

更新1：

目前我得到如下视图。

实际上我在OverlapThisSectiondiv中使用primeng下拉菜单。

<p-dropdown>不会被它的顶部 div 重叠。

如何解决这个问题。

标签： htmlcssprimeng

Answer 1

我看到这 2 个不同div的 s，所以你可以使用position:absolute;和top:20px;到第二个 div。

#OverlapThisSection {
  margin: 10px;
  position: absolute;
  top: 30px;
  background-color: green;
}

<div *ngIf="allFiltersData.length > 0">
  <div style="width: 100%; height:50px;">
    <div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0
      (click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>

    <div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
      <div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
        <input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
        <input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
      </div>
      <div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
        <input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;"
          id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
        <label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
      </div>
      <br>
    </div>
  </div>
</div>

<div id="OverlapThisSection" style="position:absolute">Second div content
  <div>

  </div>
</div>

或者另一个简单的例子，你不必为此使用z-index：

.first {
  height: 100px;
  width: 100px;
  background-color: red;
}

.second {
  margin: 10px;
  position: absolute;
  top: 10px;
  height: 80px;
  width: 80px;
  background-color: green;
}

<div class="first">
</div>
<div class="second">
</div>