OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

popup div not scrolling with window

  • Thread starter Thread starter Richard Pawson
  • Start date Start date
R

Richard Pawson

Guest
I have created a simple popup div (for offering auto-complete options), which I want positioned at the point in the text where it was created, but overlaying rather than displacing other content. So in CSS I have set, for this div:

Code:
position: absolute;
z-index: 1;

This works exactly as I want except that the popup does not move when the other content that it overlays is scrolled. The definition for absolute position (on W3Schools) says:

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed) ... However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

None of the other elements on my page have an position explicitly specified i.e. they all use the default (static) position. So the second half of the above description sounds to me like absolute is the right option for what I want. The only other position options that work with z-index are: relative, fixed, sticky - and none of them fixes the issue anyway.

What am I missing?
<p>I have created a simple popup <code>div</code> (for offering auto-complete options), which I want positioned at the point in the text where it was created, but overlaying rather than displacing other content. So in CSS I have set, for this <code>div</code>:</p>
<pre><code>position: absolute;
z-index: 1;
</code></pre>
<p>This works exactly as I want <em>except</em> that the popup does not move when the other content that it overlays is scrolled. The definition for <code>absolute</code> position (on W3Schools) says:</p>
<blockquote>
<p>An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed) ... However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.</p>
</blockquote>
<p><em>None</em> of the other elements on my page have an position explicitly specified i.e. they all use the default (<code>static</code>) position. So the second half of the above description sounds to me like <code>absolute</code> is the right option for what I want. The only other <code>position</code> options that work with z-index are: <code>relative</code>, <code>fixed</code>, <code>sticky</code> - and none of them fixes the issue anyway.</p>
<p>What am I missing?</p>
Continue reading...
 

Latest posts

D
Replies
0
Views
1
Dhanushka Amarakoon
D
S
Replies
0
Views
1
Shikhar Ambashta
S
Top