位置：绝对位置和相对位置不起作用

Question

我想在顶部声明，在底部声明标题，但这是每个浏览器的输出，我在这里做错了什么

Debug Sampler

这是我的HTML代码：https://pasteboard.co/I67sPCe.png 这是我的CSS代码：https://hastebin.com/bocacehoka.js

.announce {
  height: 45px;
  width: 100%;
  position: relative;
}

.header {
  position: absolute;
  height: 130px;
  background: blue;
  width: 100%;
  bottom: 0;
}

<div class="announce">
  <div class="header">
    <img src="img/logo.png">
  </div>
</div>

Answer 1

自bottom:0到.header以来，它的高度越来越高。希望这对您有所帮助

.announce {
  height: 45px;
  width: 100%;
  position: relative;
}

.header {
  position: absolute;
  height: 130px;
  background: blue;
  width: 100%;
  /* bottom: 0; */
}

<div class="announce">
  <div class="header">
    <img src="img/logo.png" alt="image">
  </div>
</div>

Answer 2

嵌套的div不能独立放置。有两个单独的元素。考虑以下内容。

announce {
  height: 45px;
  width: 100%;
  position: relative;
}

.header {
  position: absolute;
  height: 130px;
  background: blue;
  width: 100%;
  bottom: 0;
}

<div class="announce">
  This is some announcement
</div>
 <div class="header">
  <img src="img/logo.png">
</div>

Answer 3

我已根据您的参考图片添加了代码。您可以选择调整announce和header的高度。

.announce {
    height: 45px;
    width: 100%;
    position: relative;
}

.header {
    background: blue;
    width: 100%;
    height: 50px;
}

.header img {
    max-width: 100%;
    max-height: 50px;
}

<div class="announce">
    <div class="header">
        <img src="https://via.placeholder.com/300x100">
    </div>
</div>

Answer 4

您必须将边距留给 .header img

.announce {
  position: relative;
  height: 45px;
  width: 100%;
}
.header {
  position: absolute;
  height: 130px;
  background: blue;
  width: 100%;
  bottom: 0;
}
.header img {
  margin: 82px 5px 0;
}

<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>