html - CSS 定位和重叠

Question

我有一个 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 盒装部分。

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