Stop overlapping when position fixed

Question

I'm trying to prevent the left div from scrolling. I've set its position to fixed but now, it is overlapping with the right one. What can I do? I've tried position: relative and absolute to the right div but nothing happens.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-7">
        </div>
        <div class="col-sm-5">
           <div id="googleMap"></div>
        </div>
    </div>
</div>

where is your css ? nothing here shows your issue. tip: take a look at position:sticky and polyfills avalable — G-Cyrillus, Apr 15 '16 at 19:52
`position: sticky` is still very unsupported, [http://caniuse.com/#feat=css-sticky](http://caniuse.com/#feat=css-sticky), thus the recommendation for polyfills. — Andrew Tibbetts, Apr 15 '16 at 20:15

score 1 · Accepted Answer · answered Apr 15 '16 at 20:10

1

Add the class col-sm-offset-7 to the col-sm-5 element.

When you make an element's position absolute or fixed, it is removed from the flow of relative and static elements, thus vacating its space in that flow, allowing subsequent elements to "move up" (or left in your situation) in its place.

Assuming you're using Bootstrap, your col divs are floated left so when you make the col-sm-7 fixed, it gets pulled out of the flow making the col-sm-5 float all the way to the left where the other element used to be before being removed from the flow.

answered Apr 15 '16 at 20:10

Andrew Tibbetts

2,874
3
23
28

Thank you, this fixed my overlapping problem, but I still can prevent it it from scrolling.. – greeny Apr 19 '16 at 11:32
So, the element you applied a `fixed` position to still scrolls with the site? – Andrew Tibbetts Apr 19 '16 at 14:26
I would guess the fixed element has a parent with a transform applied to it. [reference](http://stackoverflow.com/questions/28157125/why-does-transform-break-position-fixed) – Andrew Tibbetts Apr 19 '16 at 18:20

Stop overlapping when position fixed

1 Answers1