div内のスクリプトタグがうまく表示されない

Question

StackOverflowと同じように、JavaScriptが無効になっているときにnoscript警告を表示します。

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

と、この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%; 
} 

#containerは私のテンプレートのメインのコンテンツ要素である

私はこのHTMLを使用しています。

noscriptタグが表示されていると、一部のコンテンツの前に表示されます。私はそれを望んでいない、内容は警告の下に表示する必要があります。

どうすればいいですか？

Answer 1

警告にはposition: fixedを設定して問題が発生しています。ブラウザのウィンドウの上部に固定しているので、ページのコンテンツがその周りを移動することは実際には期待できません。下にスクロールするとどうなりますか？ページ全体の内容が警告を回避するために並べ替えられますか？

スクロールしてもブラウザウィンドウの上部に警告が表示されないようにしますか？そうでない場合、position: fixedはあなたが探しているものではありません。

Answer 2

position：fixedの振る舞いを希望し、最初のコンテンツを上からプッシュする必要がある場合は、noscript領域に2番目のdivを含めることができます。このdivの可視性を与える：隠され、高さはdiv：position：fixedの高さに等しい。