I think I understand what you mean… Just remove overflow: auto; from the .sibling class.
/*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"
}));
});
<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>
Problem :
I am trying to create a drop-down type menu and want to position a div so that it overflows all other objects on the page – including parents and parents siblings. At the moment as the div grows it’s parent scrolls instead. I tried adding an overflow:hidden parent to the div I want to grow but then it wasn’t attached to it’s actual parent. This meant when I added extra divs it stayed where it was. I have tried adding z-index but that only works on the direct siblings. Can anybody make it so the yellow div covers all others but still stays attached to it’s host 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"
}));
});
<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>
Comments
Comment posted by yinsweet
If
Comment posted by bevan7
Thanks for that but I’m looking for a way to make the absoluteDiv cover all others and stop it’s parent scrolling. The text is just there to add something.
Comment posted by bevan7
Brilliant thanks. That works. I know it’s a tall order but can you find a way to do it with overflow:auto still there? Some of the internal divs will be floating and overflow:auto keeps them inside the parent.
Comment posted by John
@bevan7 if you can add an id to those specific divs you want
Comment posted by bevan7
Thanks. I’m going to change the display to flex and that seems to work. Thanks for your help 🙂
