Question

我的HTML代码：

<div id="backgroundH"></div>

<div id="header">
    <h2> Premium Store </h2>
</div>

我的CSS代码：

#backgroundH {
    width: 100%;
    height: 50px;
    background-color: #dddddd;
}

#header {
    top:-50px;
    color:black;   
    font-family:Courier New;
}

body {
    background-color:#cccccc;
}

那么为什么它不起作用？我尝试了一切。有人可以告诉我如何把这个文本放在我的div上，我在这种情况下用作背景吗？

它应该看起来像一个文字下面的灰色背景，上面写着“高级商店”。

Answer 1

你的div的顺序错了它应该是这样的：

http://jsfiddle.net/mCGt8/

HTML：

<div id="backgroundH">        
    <div id="header">
        <h2> Premium Store </h2>
    </div>        
</div>

的CSS：

#backgroundH {
  width: 100%;
  height: 50px;
  background-color: #dddddd;       
}

#header {    
  top:-50px;
  color:black;   
  font-family:Courier New;
}

body {
  background-color:#cccccc;
}

Answer 2

在text-div中你使用top: -50px，所以我相信你想要text-div兄弟到background-div而你错过了position: relative。

#header {
    position: relative;
    top: -50px;
    color: black;   
    font-family: Courier New;
}

position: relative的问题是div在top: -50px之前填充的空间仍然存在。

所以，你有两种方法：

CSS：使用margin-top: -50px;
HTML：如果可能，将text-div嵌套到background-div。（优选的）

在文本下放置div

2 个答案: