停止 parent 滚动并允许绝对定位 child 重叠 parent

Question

我正在尝试创建一个 drop-down 类型的菜单并希望放置一个 div 以便它溢出页面上的所有其他 objects - 包括 parents和 parent 的兄弟姐妹。目前，随着 div 的增长，parent 开始滚动。我尝试将 overflow:hidden parent 添加到我想要增长的 div，但它并没有附加到它的实际 parent。这意味着当我添加额外的 divs 时，它会保持原样。我试过添加 z-index 但这只适用于直接兄弟姐妹。任何人都可以让黄色 div 覆盖所有其他人，但仍然附着在它的宿主 div 上吗？

/*add text to the absoluteDiv- I want the absolute div to overflow all other divs and parents etc*/
$("body").on("click", "#addStuffToDiv", function() {
  $("#absoluteDiv").append("why is my parent scrolling? <br/>I want to grow over<br/>sibling1 and sibling 2<br/>");
});
/**this will add divs. I want the absoluteDiv to move with it's child host when divs are added **/
$("body").on("click", "#addDivsToSibling", function() {
  $("#sibling1").prepend($("<div>", {
    class: "childDiv"
  }));
});

.sibling {
  margin: 10px;
  padding: 20px;
  background-color: green;
  overflow: auto;
}

.childDiv {
  background-color: aqua;
  width: 60px;
  height: 60px;
  margin: 5px;
  position: relative;
  display: inline-block;
}

.childHost {
  background-color: orange;
}

#absoluteDiv {
  min-width: 150px;
  background-color: yellow;
  z-index: 150;
  position: absolute;
  top: 0px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
  <!--- button that adds info to the div I want to grow -->
  <button id="addStuffToDiv">add stuff to the div</button><button id="addDivsToSibling">add divs</button>
  <!--this is parent - when information is added to absoluteDiv I don't want this parent to scroll but instead the yellow box to overflow -->
  <div id="sibling1" class="sibling">
    <div class="childDiv"></div>
    <div class="childDiv childHost">
      <!--when text is added to this div I want it to grow over it's parent and not have parent scroll -->
      <div id="absoluteDiv" class="">some Random text <br/>I want to grow over<br/>sibling1 and sibling 2<br/></div>
    </div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
  </div>
  <div class="sibling">
    <div class="childDiv"></div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
  </div>
</body>

Answer 1

我想我明白你的意思了...只需从 .sibling class 中删除 overflow: auto;。

/*add text to the absoluteDiv- I want the absolute div to overflow all other divs and parents etc*/
$("body").on("click", "#addStuffToDiv", function() {
  $("#absoluteDiv").append("why is my parent scrolling? <br/>I want to grow over<br/>sibling1 and sibling 2<br/>");
});
/**this will add divs. I want the absoluteDiv to move with it's child host when divs are added **/
$("body").on("click", "#addDivsToSibling", function() {
  $("#sibling1").prepend($("<div>", {
    class: "childDiv"
  }));
});

.sibling {
  margin: 10px;
  padding: 20px;
  background-color: green;
  
}

.childDiv {
  background-color: aqua;
  width: 60px;
  height: 60px;
  margin: 5px;
  position: relative;
  display: inline-block;
}

.childHost {
  background-color: orange;
}

#absoluteDiv {
  min-width: 150px;
  background-color: yellow;
  z-index: 150;
  position: absolute;
  top: 0px;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
  <!--- button that adds info to the div I want to grow -->
  <button id="addStuffToDiv">add stuff to the div</button><button id="addDivsToSibling">add divs</button>
  <!--this is parent - when information is added to absoluteDiv I don't want this parent to scroll but instead the yellow box to overflow -->
  <div id="sibling1" class="sibling">
    <div class="childDiv"></div>
    <div class="childDiv childHost" id="test">
      <!--when text is added to this div I want it to grow over it's parent and not have parent scroll -->
      <div id="absoluteDiv" class="">some Random text <br/>I want to grow over<br/>sibling1 and sibling 2<br/></div>
    </div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
  </div>
  <div class="sibling">
    <div class="childDiv"></div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
    <div class="childDiv"></div>
  </div>
</body>

停止 parent 滚动并允许绝对定位 child 重叠 parent

Stop parent scrolling and allow absolute positioned child to overlap parent

html

css

jquery

css-position