Hey there, I have a question about using relative and absolute positioning along with applying clearfix to the main container in my code. The layout is quite simple - a nav-bar with a drop-down menu at the top, followed by a hero image spanning the screen, some paragraphs, and a footer.
My issue arises when trying to place three elements within the hero image area - the hero image itself, a title word on the top left corner, and a logo on the top right corner. While everything looks fine on my 1280 x 1024 resolution screen, the logo gets misaligned on a wider screen (1680 x 1050).
I originally set the hero image as a background, used relative positioning for the main div, and absolute positioning for the title word and logo divs. Despite applying clearfix, they don't stay together as expected. Could this be due to a lack of code for responsive design or because of using a background image for the hero? Would using z-index to specify stack order fix this issue?
Below is the relevant code snippet. Any insights would be greatly appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%;
height: 40%;
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}