Div inside no- script tag doesn't display well

Question

I want to show a noscript warning when users have javascript disabled, just like StackOverflow.

I am using this html:

<noscript>    
  <div id="noscript-warning">
    Este sitio funciona mejor con JavaScript habilitado. Descubrí
    <a href="">cómo habilitarlo.</a>
  </div>
</noscript>

and this css:

#noscript-warning
{
    font-family: Arial,Helvetica,sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    text-align: center;
    font-weight: bold;
    font-size: 12pt;
    color: white;
    background-color: #AE0000;
    padding: 10px 0;
    display: block;    
}

#noscript-warning a
{
    color: #FFFFC6;
}

#container
{
    width: 98%;
    margin: auto;
    padding: auto;
    background-color: #fff;
    color: black;
    border-style: solid;
    border-color: #3E4F4F;
    border-width: 1px 2px 2px 1px;
    line-height: 130%;
}

where #container is the main content element of my template.

When the noscript tag is visible, it appears in front of some content. I do not want this, the contents should be displayed below the warning.

How can i do this?

Answer 1

If you want the position: behavior to be fixed and you need to move the original content down, you can include the second div in your noscript area. Give this visibility to div: hidden and a height equal to the height of the div with position: fixed.

Answer 2

, position: fixed . , , . , ? , ?

, , ? , position: fixed , .