CSS定位和重叠

时间:2011-10-28 01:45:25

标签: html css overlay positioning

我有一个HTML页面的CSS生成部分。它目前位于页面的主要内容区域,右侧是导航栏。我有一个图表,需要集中在整个HTML页面,其中包括在导航栏下。

我如何使用CSS定位来覆盖HTML代码块(也有一些CSS)以使整个页面居中。

我有预感如何做到这一点: 我认为我需要重叠的CSS部分才能进入导航栏。

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

要叠加的HTML将在h6下。

HTML将按照这样的方式编写

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

我或多或少想要一种方法将所有代码集中在我的html的一部分中,但它必须相对于整个HTML页面居中,而不仅仅是CSS盒装部分。

2 个答案:

答案 0 :(得分:1)

我们经常使用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 标记,否则浏览器将假定正文仅与其内容一样高(例如,在您的情况下为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%;
}

答案 1 :(得分:0)

您可以通过为叠加内容设置固定的宽度和高度来实现此目的。例如:

.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/