I find myself in a challenging situation with an existing website that requires some minor adjustments. While I understand that what I am about to ask may not be best practice, I'm still curious if it's technically achievable.
Imagine having a parent DIV with a CSS property of position: fixed; and top: 0;, now within this container, is it feasible to have a child element that behaves differently? Specifically, can this child DIV scroll along with the rest of the page while the parent remains fixed in its position?
Despite my efforts in trying out various position properties on the child element, I haven't been successful in breaking it free from its parent's constraints.
Take a look at the current code example here.
body {
margin: 0;
height: 2000px;
}
* {
color: white;
}
.parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
}
.child1 {
background-color: darkgreen;
height: 100px;
width: 100%;
}
.child2 {
background-color: green;
height: 100px;
width: 100%;
}<DIV class="parent">
<DIV class="child1">
child1 should stay at top during scroll
</DIV>
<DIV class="child2">
child2 should scroll with page (begin to disappear once the page is scrolled down). What (if anything) can I apply to this child to get this behavior?
</DIV>
</DIV>Ideally, I would like to achieve this effect using only HTML & CSS, but I am open to considering alternative methods as well.