Остановить родительскую прокрутку и разрешить дочернему элементу с абсолютным позиционированием перекрывать родительский элемент - PullRequest
Новая
       19

Остановить родительскую прокрутку и разрешить дочернему элементу с абсолютным позиционированием перекрывать родительский элемент

1 голос
/ 26 мая 2020

Я пытаюсь создать раскрывающееся меню типа и хочу разместить 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>

1 Ответ

1 голос
/ 26 мая 2020

Думаю, я понимаю, о чем вы ... Просто удалите 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>
...