时间戳

首页 > 解决方案 > 停止父级滚动并允许绝对定位的子级与父级重叠

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

问题描述

我正在尝试创建一个下拉式菜单并希望放置一个 div 以便它溢出页面上的所有其他对象 - 包括父母和父母兄弟姐妹。目前，随着 div 的增长，它的父级滚动。我尝试向我想要增长的 div 添加一个溢出：隐藏的父级，但它并没有附加到它的实际父级。这意味着当我添加额外的 div 时，它会停留在原来的位置。我尝试添加 z-index 但这仅适用于直接兄弟姐妹。任何人都可以做到让黄色 div 覆盖所有其他 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>

标签： htmljquerycsscss-position

解决方案

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

/*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>

推荐阅读