My goal is to conceal a parent component from its child element. I attempted to achieve this by using the parent component as a background while adding additional backgrounds to the child elements for overriding purposes. However, this method did not work well for me due to certain frontend issues.
Is there a way to hide child1 (when it is set to absolute positioning, as that is the only layout that functions correctly on my frontend for design reasons) from child3 when it becomes visible on child2?
Thank you in advance for any insights or suggestions.
<main className="mainbg">
<div className="child1">
a component along the page. from top to bottom. see css.
</div>
{/*/ <Awesomeslider> /*/}
<div className="child2">
firstslide
</div>
<div className="child3">
rightslide
</div>
{/*/ <Awesomeslider/> /*/}
</main>
//Slider with React.js = awesomeslider.mainbg {
width: 100vw;
height: fit-content;
display: block;
background: linear-gradient(/*/ some gradient along the page including sliders /*/);
}
.child1 {
position: absolute;
top: 0;
width: 50vw; /*/ will be setted as it will be fit along full page from main to child2, but it must be hidden in child3 /*/
margin: auto;
}
.child2 {
width: 100vw;
height: fit-content; /*/ child1 will be visible here /*/
}
.child3 {
width: 100vw;
height: fit-content; /*/ child1 won't be visible here /*/
}<div id="root"><div/>Additional Draft: