Here is the HTML snippet I am working with:
<div class="parent">
<div class="child"></div>
</div>
The corresponding CSS styles are as follows:
.parent {
position: fixed;
}
.child {
position: fixed;
left: calc(100% - 10%);
}
I am trying to find a way to make the child element relative to its parent, even though both have fixed positions.
Initially, I wanted to achieve this layout:
.parent {
position: relative;
}
.child {
position: absolute;
left: calc(100% - 10%);
}
However, the parent element in this case is a header that needs to remain fixed at the top of each page. Changing it to relative positioning is not an option. While I could switch the child element from fixed to absolute positioning, that doesn't address my main concern. My goal is to ensure that the child element's styling remains accurate across various screen sizes by default. Is there any workaround for achieving this?