Question

我正在尝试创建一个下拉类型菜单，并希望放置一个div，以使其溢出页面上的所有其他对象-包括父母和父母兄弟姐妹。目前随着div的增长，它的父级滚动了。我尝试在我要增长的div中添加一个overflow：hidden父级，但是它并没有附加到它的实际父级上。这意味着当我添加额外的div时，它会保持原样。我曾尝试添加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类中删除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>

停止父级滚动并允许绝对定位的子级与父级重叠

1 个答案: