Position: absolute and position: relative doesn't work - html

Question

I want to announce on the top and header in the bottom but this is the output in every browser what am I doing wrong here
https://pasteboard.co/I67sPCe.png
this is my HTML code: https://hastebin.com/bocacehoka.js
this is my CSS code: https://hastebin.com/zapegulomu.css
.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

since you had bottom:0 to .header, the height of it was getting increased towards the top. Hope this helps thanks
.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

nested divs cannot be placed independently. Have two separate elements. consider the following.
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

I have added the code as per your reference image. You can adjust the announce and header height optionally.
.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

You have to give the margin to .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>