Question

我正在尝试为我的Minecraft服务器创建一个网站，并且试图在我写的几行文字后面添加背景。我的div未显示时遇到了麻烦。一开始我没有正确输入div ID，但是现在仍然没有显示，但是当我正确输入ID时，它会更改网页的高度和宽度。...怎么了？

#happy {
  color: green;
  position: relative;
  top: 500px;
  height: 300px;
  width: 100px;
  left: 500px;
  z-index: 1;
}

#para {
  font-size: 18px;
  position: relative;
  top: 265px;
  left: 350px;
  color: black;

<div id="happy">
  <p id="para">
    Welcome to Skycraft. This is a white-listed vanilla server that was created by GamingMashup and includes yooutubers such as <br> TimelySeekerYT, The Blob army, Bluddynoodle, CraftingGamerMC
  </p>
</div>

Answer 1

#happy {
  color: green;
  position: relative;
  height: 300px;
  width: 100px; 
  z-index: 1;
}

#para {
  font-size: 18px;
  position: relative; 
  color: black;
}

<div id="happy">
  <p id="para">Welcome to Skycraft. This is a white-listed vanilla server that was created
    by GamingMashup and includes yooutubers such as <br>TimelySeekerYT, The Blob army, Bluddynoodle,
    CraftingGamerMC<br></p>
</div>

我已从您的代码中删除了以下内容：

#happy {   
   top: 500px;  
   left: 500px;
}

#para {  
   top: 265px;
   left: 350px;
}

原因如下：top和left设置元素的位置，例如top: 500px将元素的位置从顶部大致设置为500px。您将#happy定义为高度300px，因此happy div将位于该位置下方的200px，因此是不可见的。

有很多这样的例子，只需删除top和left标签，它将正确显示。如果要放置它，请考虑使用其他方法。

对top的更好定义如下：

如果位置：相对； -top属性使元素的顶部边缘在其正常位置上方/下方移动。

发件人：CSS top Property

为什么一个div没有显示，而另一个却没有显示

1 个答案: