Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Hi I think you should do this:</p> <p><strong>css</strong></p> <pre><code>#navcontainer { position:fixed; background:red; left:0; right:0; top:0; height:100px; z-index:3; } .city { position:relative; background:green; left:0; right:0; padding:10px; top:100px; z-index:2; } .city .text { padding:10px; background:yellow; }​ </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div id="navcontainer"&gt;This is navigation&lt;/div&gt; &lt;div class="city"&gt; &lt;div class="text"&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;here text &lt;br /&gt;&lt;/div&gt; &lt;/div&gt; ​ </code></pre> <p>Live demo <a href="http://jsfiddle.net/xLnKN/1/" rel="noreferrer">http://jsfiddle.net/xLnKN/1/</a></p>
 

Querying!

 
Guidance

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