如何使绝对定位的元素重叠其溢出滚动父级

Question

我想与absolute的祖父母在overflow:scroll的位置重叠

.do-scroll{    
  height:  120px;
  overflow-x:hiddem;
  overflow-y: scroll;
}


    .combo-open section > input {
        display: block;
        margin: 2px auto;
        position: relative;
        width: 98%;
        border: 1px solid #4d7496 !important;
        height: 30px;
        padding: 3px 5px;
    }

.customSelectBox {
    position: relative;
}

.customSelectBox {
    visibility: visible !important;
}
single-select-combo {
    position: relative;
    width: 100%;
    display: block;
    height: calc(2.25rem + 2px);
}

    single-select-combo .contentdropdown.combo-open, multi-select-combo .contentdropdown.combo-open {
        top: 68px;
        left: 0;
        width: 100% !important;
        z-index: 999;
    }

.contentdropdown .dropup, .selected-combo-text {
    display: none !important;
}

  

<div class="do-scroll">
<single-select-combo id="CompanyComboId"  aria-haspopup="true" aria-expanded="true" class="ng-isolate-scope">
<div class="contentdropdown" aria-labelledby="dLabel" id="CompanyComboIdContent" style="position: absolute; display: block; visibility: visible; z-index: 9999;background:red">
    <section class="">
        <span class="selected-combo-text ng-binding" ng-bind="selectedText"></span>
        <span class="dropup"><span class="caret"></span></span>
        <input type="text"  class="ng-pristine ng-valid ng-empty ng-touched">
        <div class="do-nicescrol" style="height:165px">
           
        </div>
    </section>
</div></single-select-combo>
</div>

我现在看到了

但是我想要这个

Answer 1

您的问题很令人困惑，但让我a一口。

如果某项具有溢出：隐藏以及位置：相对，则您不能生育孩子  与position：绝对重叠是其父级。

您可以从父级拆分position：relative，然后将其放在祖父母元素上。这样，孙子元素的位置将与中间/父元素重叠。

祖父母的位置：相对

.Grandparent {
      background: pink;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      position: relative;
      width: 300px;
}
.Parent {
      border: 3px dotted teal;
      height: 150px;
      overflow: hidden;
    /*   position: relative; */
      width: 150px;
}
.Child {
      background: purple;
      height: 75px;
      position: absolute;
      top: 25%;
      left: 25%;
      transform: translate(-75%, -75%);
      width: 75px;
}

<div class="Grandparent">
      <div class="Parent">Testing testing test 123 ABC do re mi As easy as 123 do re mi testing testing 123 Testing testing test 123 ABC do re mi As easy as 123 do re mi testing testing 123 Testing testing test 123 ABC do re mi As easy as 123 do re mi testing testing 123
            <div class="Child">
            </div>
      </div>
</div>

父母的职位：相对

.Grandparent {
      background: pink;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
  /*   position: relative; */
      width: 300px;
}
.Parent {
      border: 3px dotted teal;
      height: 150px;
      overflow: hidden;
      position: relative;
      width: 150px;
}
.Child {
      background: purple;
      height: 75px;
      position: absolute;
      top: 25%;
      left: 25%;
      transform: translate(-75%, -75%);
      width: 75px;
}

<div class="Grandparent">
      <div class="Parent">Testing testing test 123 ABC do re mi As easy as 123 do re mi testing testing 123 Testing testing test 123 ABC do re mi As easy as 123 do re mi testing testing 123 Testing testing test 123 ABC do re mi As easy as 123 do re mi testing testing 123
            <div class="Child">
            </div>
      </div>
</div>