Hope you're well. I've seen several similar questions to the one I'm about to ask, but there seems to be some prevailing condition in my code that is preventing me from removing an element from the traditional flow.
My understanding is, that when an element has its position set to 'absolute' - it is removed from flow. What that means to me is, when an element is removed from flow, it does not interact or partake with the other elements in anyway. It is as if it were on a separate 2d plane from the original flow. It's like if I lived on the second floor of a building, and you lived on the third floor. We do not meet in the hallways.
There is some prevailing condition in my code, which is preventing this from being applied however. As to what it is I cannot say, what is happening is this - I have a side bar that retracts (It was originally designed a different way, to make the whole page flex, that is to say it was 'in flow' but I had a request for a change, this may or may not relevant be relevant). Every time it comes out, it 'bumps' into the component that it is sitting next to, and causes it to shift, say 10/20 pixels.
My thinking is, that if I remove the side bar from flow, than it will not bump into the component anymore. However, I just want this collision to stop, and I am open to any solution that prevents this from happening. Chiefly, what I'd like to see happen is the side bar to slide over the component, as it does now, and slide on top of it without bumping into it. The relevant sections of my code are below.
This is the sidebar itself. Where you see 'closed' - it pivots between 'open' and closed. As a consequence of this change, the side bar moves in and out of the left hand side of the screen.
This is a gif of the issue: https://media.giphy.com/media/XX8LJjjzRfETe1Z1Eb/giphy.gif
As you'll see in the picture, despite the fact that position: absolute has been set on the element, it is crossed out. Since it is positioned - as you'll see - I don't understand why this is happening. I tried setting it to 1 1 to, and the same issue was still happening - position: absolute as not being applied.
- I have looked into the margins of the elements within the side bar. They do not appear to be the issue, because when I remove them the issue continues.
- I have looked into the margins on the parent containing the components - but this is not the issue either, because I removed the padding from this and nothing happened. It has no margins.
- I've looked into the components themselves also that are rendered within the 'component-container', on the right. Although it is true that they are structured similarly, that are not all structured the same. Yet the behavior is uniform, so that leads me to believe it is the side bar itself that is causing the issue with its neighbor the container, as opposed to items that are in the container.
<div class="side-bar lg closed">
<div class="col textContainer-side-bar closed">
<div class="sidenav closed">
<a href=""><h1>Home</h1></a><a href="#Contacts"><h4>Contacts</h4></a><a href="#Flights"><h4>Flights</h4></a><a href="#Scripts"><h4>Scripts</h4></a>
</div>
</div>
</div>
Here is all the CSS that is relevant.
{{ I have all the children of the side bar situated with at least z-index: 2 and position: relative. The parent is 'absolute'
- My understanding is that this is the proper way to set it up. }}
.side-bar {
position: absolute;
flex-direction: column;
min-height: 100vh;
left: 0;
top: 0;
z-index: 2;
}
div.side-bar.closed,
div.side-bar.closed-open-first-time,
div.textContainer-side-bar.closed,
div.textContainer-side-bar.closed-open-first-time,
div.sidenav.closed,
div.sidenav.closed.closed-open-first-time {
transform: translateX(-120%);
transition: transform 1s ease;
position: relative;
z-index: 2;
}
{{This is unintentionally being applied to the parent row. I just checked, the same behavior occurs with and without it.}}
.row:first-of-type {
overflow: hidden;
flex-direction: row;
}
