Question

我对css和html很新。我正在设置俄勒冈小道的文本版本，在我的主菜单屏幕上，我的一个div出现在一些文字中，我已经淡入淡出。我搜索了很多，无法得到任何解决方案。

CSS和HTML

body {
  background-color: black;
}

#title {
  color: white;
  text-align: center;
}

div.menu {
  position: relative;
  vertical-align: middle;
}

p {
  position: relative;
  color: burlywood;
  text-align: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

h7 {
  position: relative;
  top: 100px;
  animation: fadeIn 2s linear infinite alternate;
}

<div id="title">
  <h1>The Oregon Trail</h1>
  <h2>Main Menu</h2>
  <h7>Press Key to Select Option</h7>
</div>
<div class="menu">
  <p>1. Travel the Trail</p>
  <p>2. Learn about the Trail</p>
  <p>3. See the Oregon Top Ten</p>
  <p>4. Turn Sound Off</p>
</div>

有关为何发生这种情况的任何提示？

Answer 1

您需要将CSS中的<h7>样式从position: relative;更改为position: initial;。这应该解决它重叠的问题！

Answer 2

这是你的问题：

h7 {
    position: relative;
    top: 100px;  
    animation: fadeIn 2s linear infinite alternate;
}

top将移动元素，但它周围的元素会将其视为未被移动。您可能希望使用margin-top或padding-top将其移至您想要的位置，而不是top。

以下是指向MDN页面的链接：

https://developer.mozilla.org/en-US/docs/Web/CSS/position

<强>相对元素根据文档的正常流程定位，然后根据顶部，右侧，底部和左侧的值相对于自身偏移。偏移量不会影响任何其他元素的位置;

Div出现在标题上

2 个答案: