How to use position: absolute; left: 0; top:0; with container

https://jsfiddle.net/864nmknf/

I have to set position for .toright and there have set a container to stay same the content when zoom out but for some reason the .toright container is not same as .notfullscreen?

Why?

There are multiple things that are going wrong. If you intend to keep using Bootstrap, I strongly suggest that you read and test out what’s described in the Grid System section of the documentation first, otherwise you are just going to keep hacking your layout and end up with an unmaintainable mess.

Coming back to your question, the reason .toright is not behaving as you would expect is because of position: absolute, which removes it from the its parent .container's layer and therefore doesn’t use its width as reference anymore. Try the following code if you want to get a feel for it:

<div class="parent">
    <div class="firstChild"></div>
    <div class="secondChild"></div>
</div>
.parent {
    height: 100vh;
    background: crimson;
}

.firstChild {
    background: turquoise;
}

.secondChild {
    position: absolute;
    background: royalBlue;
}

It seems that you are using position: absolute and z-index: 1234 in order to have the desired elements in front of the background (<div>s are layered on top of each other in the order that they apparent in the document unless you change that order, as you have done); as such, this is effectively a hack. To get around this, you can simply apply background image to .fullscreen, that is, <div class="fullscreen background">; and don’t forget to remove height: 100% and width: 100% from .background.

If you want the background to be behind both “sections”, you may also want to move the last <div class="container"> to inside <div class="fullscreen background">; there is also a chance that you will want to remove height: 100vh from <div class="fullscreen background">.

More often than not, if you find yourself creating layouts with absolute positioning and messing with z-index because things just don’t seem to go where you want, it’s very likely that there is a more elegant solution and perhaps an indication that you should go back to the basics and/or read through the documentation of the framework that you are using.

I hope that helps!

1 Like