1

我试图将我的标题<h1>放在一个名为 div 的类上，该类light包含一个名为light.png. 我已经使用Z-index并添加了它们position:relative，但仍然<h1>没有放置<div class=light>。

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

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

CSS代码：

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

6 回答 6

2

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

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

现场示例：Tinkerbin
我修改了您的背景颜色以显示示例。

你不需要为此使用z-index。

于 2012-07-28T16:55:21.620 回答
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错误，它不完全兼容浏览器，所以我更喜欢这样做，因为这在旧浏览器上看起来也不错，而不仅仅是新浏览器。

于 2012-07-28T16:58:20.133 回答
2

小提琴

无需分配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;
}​
于 2012-07-28T17:00:25.740 回答
1

把<h1>标签放在里面div light

 <body>
    <div class="light">
      <h1>sdfdsf</h1>
    </div>
</body>
于 2012-07-28T16:55:29.610 回答
1

改用绝对

<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 像素添加到元素的 LEFT 位置
于 2012-07-28T16:56:01.593 回答
1

见演示

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 - 更高的元素。

于 2012-07-28T16:57:21.950 回答