CSS定位和重叠

Question

我有一个HTML页面的CSS生成的部分。它当前位于页面的主内容区域中，该区域位于导航栏的右侧。我有一个图形，它需要居中到整个HTML页面，包括在导航栏下。

如何使用CSS定位来覆盖HTML代码块(它也有一些CSS )，使其在整个页面上居中。

我有一种预感:我想我需要重叠的CSS部分去导航栏下面。

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

要覆盖的超文本标记语言将位于h6之下。

HTML将按如下方式编写

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

我或多或少想要一种方法来居中我的html的一个部分的所有代码，但它必须相对于整个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
} 

但当然，为了在所有浏览器中居中高度&屏幕分辨率，您必须向 body 标记添加以下条件，否则浏览器将假定body仅与其内容一样高(即。在你的情况下是20px )。

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%;
}