Question

您好，我正在尝试为我的学校项目制作主页，并试图在图像上放置一个文本框。我一直在使用position：absolute / relative，但是每次我将其设置为绝对值时，图像仅覆盖我的导航栏，并且div不会放在顶部。我不知道我是否解释得很好，但这就是我所拥有的：

.navbar {
  list-style-type: none;
  margin: 0;
  float: right;
  width: 100%;
  position: relative;
  clear: none;
}

.navbarlist {
  float: right;
  padding: 2%;
  clear: none;
  padding: 40px;
}

.image1 {
  width: 100%;
}

.cover {
  width: 100%;
  height: 500px;
  position: relative;
  background-color: royalblue;

}

.covercontainer {
  position: relative;
}

<div class="navbarcontainer">
  <ul class="navbar">
    <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
    <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
    <li class="navbarlogo"><img class="navbarimg" src="image.png"></li>
  </ul>
</div>
<div class="covercontainer">
  <img class="image1" src="#">
  <div class=cover></div>
</div>

Answer 1

您是否正在寻找这样的解决方案？

此方法的最佳方法是使用背景图像而不是图像。如果仍然需要使用图像，请执行以下步骤将封面div放置在图像上。

为容器position: relative;添加div
为子div添加position: absolute; top: 0;。

.navbar {
    list-style-type: none;
    margin: 0;
    float: right;
    width: 100%;
    position: relative;
    clear: none;
}

.navbarlist {
    float: right;
    padding: 2%;
    clear: none;
    padding: 40px;
}

.image1 {
    width: 100%;
    position: absolute;
    top: 0;
}

.cover {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    background-color: #4169e199;
}

.covercontainer {
    position: relative;
}

.navbarcontainer {
    width: 100%;
    display: inline-block;
}

<div class="navbarcontainer">
    <ul class="navbar">
    <li class="navbarlist">
        <a class="navbarlink" href="#">Contact Us</a>
    </li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist">
        <a class="navbarlink" href="#">Attractions</a>
    </li>
    <li class="navbarlist">
        <a class="navbarlink, active" href="#">Home</a>
    </li>
    <li class="navbarlogo"><img class="navbarimg" src="image.png"</li>
    </ul>
</div>
<div class="covercontainer">
    <img class="image1" src="https://www.w3schools.com/html/pic_trulli.jpg" />
    <div class="cover"></div>
</div>

Answer 2

如果您希望图像不显示，则只需使用background-image中的css属性。如果您仍想对图像使用img标签，请确保您的父元素具有position: relative并且两个子元素（即img和div元素都具有{{1} }，并使用position:absolute和z-index之类的img { position: absolute; z-index: 1 }属性控制其堆叠顺序。

Answer 3

.navbar {
  list-style-type: none;
  margin: 0;
  float: right;
  width: 100%;
  position: relative;
  clear: none;
}

.navbarlist {
  float: right;
  padding: 2%;
  clear: none;
  padding: 40px;
}

.image1 {
  width: 100%;
}

.covercontainer {
  position: relative;
}

.cover {
  width: 100px;
  height: 50px;
  background-color: royalblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <div class="navbarcontainer">
      <ul class="navbar">
        <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
        <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
        <li class="navbarlogo"><img class="navbarimg" width="80px" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></li>
      </ul>
    </div>
    <div class="covercontainer">
      <img class="image1" src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg">
      <div class="cover"/>
    </div>
  </body>

</html>

Answer 4

我猜你的问题是由于导航栏中的“浮动”没有高度。 @Nitheesh回答了问题。

.navbarcontainer {
    width: 100%;
    display: inline-block;
}

您可能开始学习使用检查器工具（使用Chrome或Firefox）查看元素。要使它正确，需要一些学习过程。

以下是使用Chrome检查器的示例，右键单击并选择“检查”。如果您已复制@Nitheesh代码，则可以取消选中/选中样式。这样，您可以看到由于使用了“ float：right”，实际上导航栏没有高度。希望这有助于进一步解释。

Answer 5

首先，只需在类covercontainer中添加clear：both
像这样

.covercontainer {
  clear: both;
  position: relative;
}

我还为封面设置了不透明度0.5和高度/宽度50％，以便图像和封面都可以显示。

第二，如果您只是删除导航栏类的float，那么也可以正常工作。

.navbar {
  list-style-type: none;
  margin: 0;
  float: right;
  width: 100%;
  position: relative;
  clear: none;
}

.navbarlist {
  float: right;
  padding: 2%;
  clear: none;
}

.image1 {
  width: 100%;
}

.cover {
  width: 50%;
  height: 50%;
  position: absolute;
  background-color: royalblue;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.covercontainer {
  clear: both;
  position: relative;
}

<div class="navbarcontainer">
  <ul class="navbar">
    <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
    <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
    <li class="navbarlogo"><img class="navbarimg" src="https://www.gravatar.com/avatar/4966b63e30afddb188b43a1d9a874519?s=48&d=identicon&r=PG&f=1"></li>
  </ul>
</div>
<div class="covercontainer">
  <img class="image1" src="https://ipsumimage.appspot.com/600x250?l=Ipsum%20Image&f=ffffff">
  <div class=cover>Div Text</div>
</div>

如何在图像上放置div而不覆盖其他所有内容？

5 个答案: