Fixed Div Overlaps Scrollbar of Static Div

Fixed Div overlaps scrollbar of static div

Your wrapper element is position:fixed; I think that you are talking about a overlay with a navigation panel on the left. Well, I had a similar situation and found out, that you can't use position:fixed; if your parent element is also position:fixed;. This will overlap the scrollbar of the parent wrapper (the overlay).

So you have to use position:absolute; instead or use this open source plugin to remove the width/height of the scrollbar from your element:

Scrollbar Fixer

fixed div overlapping adjacent div on horizontal scroll

The reason for this is that fixed technically makes it take up no space on the page.

I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.

The end result should look something like:

.content{

width:500px;
height:1060px;

margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;

    }

If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.

Hopefully this helped. Cheers.

Fixed div overlapping content?

Just replace fixed with sticky. Please modify the code like below and see that works for you:

.contain {
/*     margin-bottom: 35rem; */
}
.data {
    background-color: red;
    border: 4px solid black;
    width: 30%;
    bottom: 30%;
    position: sticky;
    height: 300px;
}

.data1 {
    width: 30%;
    height: 500px;
    margin-left: 60%;
    background-color: black;
}

.footer {
    background-color: blue;
    width: 100%;
    height: 350px;
    bottom: 0;
}

Fixed div background overlapping browser scrollbars

That was a strange issue. But I figured out that the scroll bar was not from the browser but instead from the parent div which had overflow: auto.

This is how I fixed that. Change the style for div id="rightpanel" to remove the overflow: auto;.

Then update the #rightcontent styles as follows:

#rightcontent {
    left: 445px;
    padding-top: 127px;
    position: relative;
    width: 650px;
}

Hopefully that should fix the issue for all browsers. Besides that I also found the browsers complaining about not finding Cufon.js. You might want to look into that as well.

Fixed element with lower z-index overlaps scrollbar in Firefox

Since also Edge render the .item.fixed on top of the scrollbar, I am not sure if it is Firefox/Edge or Chrome who is correct.

As the scrollbar actually belongs to the scrolldiv, I think Chrome is wrong.

As the .item.fixed is a child of .scrolldiv, and should be positioned at its bottom, instead use position: absolute, and you'll get the same result cross browsers, where the scrollbar is fully visible.

Updated fiddle

Stack snippet

.menuehead{  background: #DDD;  position: fixed;  width: 100%;  height: 40px;  min-height: 40px;  border: 2px solid black;}.scrolldiv{  height: calc(100vh - 42px);  width: 200px;  margin-top: 42px;  background: #AAA;  position: fixed;  overflow-y: auto;  display: flex;  flex-direction: column;  z-index: 1002;}.scrolldiv .fixed.item{  position: absolute;                  /*  changed  */  bottom: 0px;  background: #DDA;  width: 100%;                         /*  changed  */  box-sizing: border-box;              /*  added  */  z-index: 2;}.scrolldiv :nth-child(2n){  background: #ADD;}.scrolldiv :nth-child(2n-1){  background: #DAD;}.item{  width: calc(100% - 2px);  height: 42px;  min-height: 42px;  border: 1px solid black;  z-index: 3;}body{  margin: 0;}

<div class="menuehead">HEAD</div><div class="scrolldiv">  <div class="item">FIRST</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div>  <div class="item">8</div>  <div class="item">LAST</div>  <div class="item fixed">FIX</div></div>

---

Related Topics