Как наложить один div на другой div, используя HTML и CSS - PullRequest
Новая
       15

Как наложить один div на другой div, используя HTML и CSS

0 голосов
/ 03 мая 2020

Я пробовал 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>

Я использую код выше.

Div с идентификатором OverlapThisSection необходимо перекрывать. Я установил для Div с именем htmlMultiSelect значение position:absolute

Div с идентификатором OverlapThisSection, чтобы он не перекрывался с другим элементом Div над ним.

Обновление 1:

В настоящее время я получаю вид, как показано ниже.

enter image description here

enter image description here

На самом деле я использую раскрывающийся список primeng внутри OverlapThisSection div.

<p-dropdown>, не перекрывающийся его верхним div.

Как решить эту проблему.

1 Ответ

0 голосов
/ 03 мая 2020

Я вижу это 2 разных div с, так что вы можете использовать position:absolute; и top:20px; для второго деления. 

#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>
...