CSSの配置とオーバーラップ

Question

私はHTMLページのCSS生成セクションを持っています。現在、ナビゲーションバーの右側にあるページのメインコンテンツ領域に配置されています。私は、ナビゲーションバーの下にあることを含むHTMLページ全体に集中する必要があるグラフを持っています。

CSSの配置を使用して、HTMLコードのブロック（いくつかのCSSもあります）をオーバーレイしてページ全体に配置するにはどうすればよいでしょうか。

私はこれをどうやって行うのかについて勘違いしています。 ナビゲーションバーの下に移動するには、重複するCSSセクションが必要だと思います。

.layout #mainContent h6 { 
position:absolute; 
left:-1000px; 
top:-10px; 
z-index:5 
} 

オーバーレイされるHTMLはh6になります。

、HTMLは、私は、多かれ少なかれ、私のhtmlのセクションですべてのコードをセンタリングする方法をしたい、この

<h6> 
    All the HTML code to be overlaid 
</h6> 

のように書き込まれますが、それは全体のHTMLページへの相対的なセンタリングする必要がありますCSSボックスセクションだけではありません。

Answer 1

固定幅と高さをオーバーレイコンテンツに設定すると、これを行うことができます。例えば：

.layout #mainContent h6 { 
    width:200px; 
    height:20px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top:-10px; /* half element's height */ 
    margin-left:-100px; /* half element's width */ 
    z-index:1000 
} 

デモ：http://jsfiddle.net/P95Bz/1/

Answer 2

私たちはしばしば、CSSを使用したものを中心に、これは我々がそれを行うだろうかです：

.layout #mainContent h6 { 
position:absolute; 
left:50%; 
margin-left:-1000px; /* half the element's width */ 
top:50%; 
margin-top:-10px; /* half the element's height */ 
z-index:5 
} 

しかし、もちろんのすべてのブラウザでの高さを中央に&画面の解像度は本体タグに次の条件を追加する必要があります。そうしないと、ブラウザは本体がコンテンツ（つまり、あなたの場合は20ピクセル）と同じ高さしかないとみなします。

body { 
    margin-top:0px; 
    margin-left:0px; 
    margin-bottom:0px; 
    margin-right:0px; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height:100% !important; 
    width:100%; 
}