Question

我正在尝试将标头<h1>放在名为light的div类上，该div类包含名为light.png的背景图像。我使用Z-index堆叠了position:relative并添加了<h1>，但<div class=light>仍未放置<body> <div class="light"></div> <h1>sdfdsf</h1> </body>。

我做错了什么？这是我的 html代码：

body {
    background-image: url(images/bg.jpg);
    background-repeat: repeat;
    z-index:1;
}
.light {
    background-image: url(images/light.png);
    margin-left:auto;
    margin-right:auto;
    z-index:2;
    width:763px;
    height:566px;
    position:relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(255,255,255,1);
    position:relative;
    z-index:5;
}

css代码：

{{1}}

Answer 1

您所要做的就是将<h1>标记放在<div>标记内。

<div class="light">
    <h1>sdfdsf</h1>
</div>

实例：Tinkerbin
我修改了背景颜色以显示示例。

您无需使用z-index。

Answer 2

以下是我在评论中所说的例子：

HTML代码：

<body>
  <div class='outer'>
      <div class="light"></div>
      <h1>sdfdsf</h1>
  </div>
</body>

css代码：

body {
   background-image: url(images/bg.jpg);
   background-repeat: repeat;
}

.outer{
   position:relative;
}
.light {
   background-image: url(images/light.png);
   margin-left:auto;
   margin-right:auto;
   width:763px;
   height:566px;
   position:absolute;
}
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 48px;
   color: rgba(255,255,255,1);
   position:absolute;
   z-index:99999999999;
   top:0;
   left:0;
}

你可以使用所有posiiton亲戚，但由于CSS错误，它不完全符合浏览器标准，所以我更喜欢这样做，因为这对老版浏览器来说也不错，而不仅仅是新浏览器。

Answer 3

Fiddle

无需将z-index分配给正文

HTML -

<div class="light"></div>
<h1>hi</h1>

CSS -

.light {
    background-image: url(http://www.ostpl.com/Gallery/web-hosting.jpg);
    margin-left:auto;
    margin-right:auto;
    z-index:1;
    width:763px;
    height:566px;
    border: 1px solid #f00;
    position: relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(0,0,0,1);
    position:absolute;
    left: 0;
    top: 0;
    z-index:2;
}

Answer 4

将<h1>标记放在div light

中

 <body>
    <div class="light">
      <h1>sdfdsf</h1>
    </div>
</body>

Answer 5

使用绝对代替

<style type="text/css" media="screen">
    body {
        background-color: black;
        background-repeat: repeat;
        z-index:1;
    }
    .light {
        background-color: yellow;
        margin-left:auto;
        margin-right:auto;
        z-index:2;
        width:763px;
        height:566px;
        position:absolute;
    }
    h1 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 48px;
        color: rgba(255,255,255,1);
        position:absolute;
        z-index:5;
    }
</style>

absolute：元素相对于其第一个定位（不是静态的）祖先元素
relative：元素已定位相对于它的正常位置，所以“left：20”增加了20个像素元素的左侧位置

Answer 6

请参阅DEMO

HTML：

<body>
  <div class="light"></div>
  <h1>sdfdsf</h1>
</body>

CSS：

.light {
    position:relative;
    width: 300px;
    height: 100px;
    background: #ccc;
    z-index: 1;
}

h1 {
    position:relative;
    z-index: 2;
    top: -10px;
}

更大的z-index - 更高的元素。

简单的Z-Index无法正常工作

6 个答案: