Databases
StackOverflow2013
Postsdbo
POMake a div stick to the top of another absolutely positioned overflow scrolled div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake a div stick to the top of another absolutely positioned overflow scrolled div
    text
    copied!<p>Here is the thing, there is a div <code>.page</code> which is absolutely positioned at tha page. Inside, there is a <code>.container</code> div and within the container there are the <code>.content</code>s. </p> <p>The <code>.page</code> has certain heigth, so, contents would be scrolled inside the <code>.page</code>. In this situation I want a <code>.stuck</code> div to stick to the top of the <code>.page</code>. ( I am sure I made grammatical mistakes above!)</p> <p>Anyway, the fiddel:</p> <p><a href="http://jsfiddle.net/YBAvb/" rel="nofollow">http://jsfiddle.net/YBAvb/</a></p> <p><strong>update:</strong> I want the <code>.stuck</code> to be fixed at the top of <code>.page</code> regardless of the scroll on the <code>.page</code>.</p> <p>this is the layout:</p> <pre><code>&lt;div class="page"&gt; &lt;div class="container"&gt; &lt;div class="content"&gt;&lt;/div&gt; &lt;div class="stuck"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and my (not working) css:</p> <pre><code>.page{ position: absolute; top:50px; left:200px; width:200px; height:300px; overflow:auto; } .container{ position:relative; } .stuck{ position: absolute; top:0; right:0; left:0; height:50px; background:blue; } .content{ height:700px; background:gray; } </code></pre> <p>I want the blue <code>.stuck</code> div <strong>always be there</strong> at the top of the <code>.page</code> div. Any help?</p> <p><strong>update:</strong> note: a quick trick might be to make the <code>.stuck</code> be <code>positions:fixed</code> and the same position and width of the <code>.page</code>, but that is not my answere since the coordinates of the <code>.page</code> might change with JS any time.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload