Question

我似乎在这里遇到了一些问题。我的div不会出现在网页上。我尝试将div的位置改为绝对，但它仍然没有显示出来。

这是我的代码：

＆＃13;

body {
  background: url("http://fux-media.com/yz/skyline_exp1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.header {
  background-color: #DADAC8;
  width: 900px;
  height: 10%;
  position: relative;
  border-radius: 7px;
  margin-top: -100px;
  margin-left: 170px;
  z-index: 500;
}
img {
  border-radius: 70%;
  border: 1px solid;
  margin-left: 40%;
  height: 175px;
  width: 175px;
  position: relative;
  z-index: 1;
}

＆＃13;

<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>

＆＃13;

Answer 1

我已将您的示例代码转换为代码段，但似乎工作正常。究竟出现了什么问题？您错过了.header <div>吗？在这种情况下，给它一些内容或给它一个固定的宽度。 .header应该怎么看？

＆＃13;

body {
  background: url("http://fux-media.com/yz/skyline_exp1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.header {
  background-color: #DADAC8;
  width: 900px;
  height: 10%;
  position: relative;
  border-radius: 7px;
  margin-top: -100px;
  margin-left: 170px;
  z-index: 500;
}
img {
  border-radius: 70%;
  border: 1px solid;
  margin-left: 40%;
  height: 175px;
  width: 175px;
  position: relative;
  z-index: 1;
}

＆＃13;

<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>

＆＃13;

Answer 2

在你的CSS中

添加这个

html, body { height: 100%; width: 100%; margin: 0; }

Answer 3

你的div在那里。但它没有任何内容，这就是为什么它不可见。添加一些内容，如文本等，或添加一些填充到标题＆＃39;类。然后你就能看到它。

div标签不会出现在网页上

3 个答案: