CODEWITHSUNDEEP
htmlcsscss-position
Aleksei Poliakov
Aleksei Poliakov

Reputation: 1332

Overflow-y and position: absolute cause the offset when scroll bar is not at the top

Here is an example: https://jsfiddle.net/sunvom3a/

I have a list of items.

Basically a container with some text and a dropdown. The idea is when you hover over the text the dropdown should be directly below (kina like a tooltip).

.container {
  overflow-y: scroll;
  height: 100px;
  border: solid 2px green;
}
.popup {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  display: none;
}
.item:hover .popup {
  display: block;
}
<div class="container">
  <div class="item"><span> Text1</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text2</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text3</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text4</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text5</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text6</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text7</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text8</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span> Text9</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text10</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text11</span>
    <div class="popup"></div>
  </div>
</div>

The first few elements that fit below the scrollbar of overflow-y (with my resolution these are first 5 items) work great:

enter image description here

but the rest are broken - when the scroll bar is moved this offset is added as a distance between the popup and the text:

enter image description here

Is there any way to get the consistent behavior for all items in the list?

Upvotes: 2

Views: 1628

Answers (2)

chirag
chirag

Reputation: 1779

just change position absolute to relative in popup class

jsfiddle: demo

.container {
  overflow-y: scroll;
  height: 100px;
  border: solid 2px green;
}
.popup {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: relative;
  display: none;
}
.item:hover .popup {
  display: block;
}
<div class="container">
  <div class="item"><span>Text1</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text2</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text3</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text4</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text5</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text6</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text7</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text8</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text9</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text10</span>
    <div class="popup"></div>
  </div>
  <div class="item"><span>Text11</span>
    <div class="popup"></div>
  </div>
</div>

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

This is exhibited in Chrome and Edge (Firefox works as expected). It is calculating the relative position based on the initial, out-of-view position.

You need to add this...

.item{
  position: relative;
}

...to make the absolutely positioned element positioned relative to the hovered item.

Fiddle: https://jsfiddle.net/sunvom3a/1/

The downside to the above solution is that it moves the tooltip inside the container, making a portion of it likely to be out of view. On a side note, I'm not sure this is a great UI anyway since you are covering other options with your tooltip. I would recommend attaching it to the parent of your container (then you don't have to worry about the tooltip being out of view either.

Adding to your snippet...

body{
    position: relative;
}

...will always put the tooltip in the top right corner of the body. This would be better done by adding a container for your scrolling container, but this is a mere example.

Fiddle: https://jsfiddle.net/sunvom3a/2/

Upvotes: 2

Related Questions