I have a child element in a scrollable parent.
I want the child to move as the parent is scrolled. I can do this if I position the child relative to the parent.
But I also want the child to show even if it’s outside the parent’s bounds. I can do this if I position the child relative to a grandparent.
How can I do both at the same time?
<code> #grandparent {
width: 200px;
height: 200px;
outline: 5px red solid;
padding: 10px;
position: relative;
}
#parent {
outline: 2px solid blue;
height: 100%;
overflow: auto;
position: relative;
}
#popup-target {
outline: 1px solid orange
}
#popup-target:not(:hover) ~ #popup {
display: none;
}
#popup {
position: fixed;
outline: 1px solid gold;
background-color: lightgray;
width: 100px;
}</code>
<code> #grandparent {
width: 200px;
height: 200px;
outline: 5px red solid;
padding: 10px;
position: relative;
}
#parent {
outline: 2px solid blue;
height: 100%;
overflow: auto;
position: relative;
}
#popup-target {
outline: 1px solid orange
}
#popup-target:not(:hover) ~ #popup {
display: none;
}
#popup {
position: fixed;
outline: 1px solid gold;
background-color: lightgray;
width: 100px;
}</code>
#grandparent {
width: 200px;
height: 200px;
outline: 5px red solid;
padding: 10px;
position: relative;
}
#parent {
outline: 2px solid blue;
height: 100%;
overflow: auto;
position: relative;
}
#popup-target {
outline: 1px solid orange
}
#popup-target:not(:hover) ~ #popup {
display: none;
}
#popup {
position: fixed;
outline: 1px solid gold;
background-color: lightgray;
width: 100px;
}<code><div id="grandparent">
<div id="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div id="popup-target">hover me</div>
<div id="popup">
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
</div></code>
<code><div id="grandparent">
<div id="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div id="popup-target">hover me</div>
<div id="popup">
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
</div></code>
<div id="grandparent">
<div id="parent">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div id="popup-target">hover me</div>
<div id="popup">
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
<div>popup</div>
</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
</div>