У меня был заголовок ниже моего раздела, и все работало нормально, но визуально мне это не понравилось, поэтому я поменял их местами, но теперь раздел перекрывает заголовок, но я на самом деле хочу его ниже заголовка. Я думаю, это что-то из-за позиций, но я не могу разобраться. Любая помощь, пожалуйста?
В основном в заголовке, у меня есть фоновое изображение с приветственным сообщением над ним. Под мной должен быть отдельный раздел с моими 3 последними сообщениями, использующими flexbox: это предварительные просмотры с изображением-ссылкой и наложением на игру заголовков поверх изображения и зеленым фильтром, чтобы сделать заголовки более понятными.
Html
<Header>
<section class="welcome">
<h1>Welcome to Game</h1>
</section>
</Header>
<Section id="LatestPosts">
<h1>Latest Posts</h1>
<div class="flexcontainer">
<div class="BoxOne">
<a href="#GameProfile"><img src="/img/example1.jpg"></a>
</div>
<div class="BoxTwo">
<a href="#GameProfile"><Img src="/img/example2.jpg"></a>
</div>
<div class="BoxThree">
<a href="#GameProfile"><Img src="/img/example3.jpg"></a>
</div>
</div>
</Section>
CSS
/* Header */
section.welcome h1{
position: relative;
color: white;
z-index: 3;
font-size: 3rem;
}
section.welcome::before {
position: absolute;
Content:"";
height: 75vh;
width: 100%;
overflow: hidden;
background-image: url(/img/example.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position-y: 95%;
filter: brightness(30%);
}
/* Latest Posts */
#LatestPosts h1 {
justify-content: center;
display: flex;
color: #222222;
align-items: center;
padding: 15px;
border: none;
vertical-align: baseline;
}
div.flexcontainer{
display: flex;
height: auto;
justify-content: center;
align-items: center;
}
div.flexcontainer div {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
margin: 0 10px;
width: 100%;
}
div.flexcontainer div a img {
width: 100%;
height: 280px;
}
div.flexcontainer div a {
display: flex;
width: 100%;
justify-content: center;
align-content: center;
position: relative;
}
div.flexcontainer div.BoxOne a::before {
display: flex;
justify-content: center;
align-items: center;
content:"gametitle1";
color: white;
font-size: 2rem;
font-family: "Montserrat", georgia, sans-serif;
position: absolute;
background-color: rgba(130, 188, 6, 0.750);
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
div.flexcontainer div.BoxTwo a::before {
display: flex;
justify-content: center;
align-items: center;
content:"gametitle2";
color: white;
font-size: 2rem;
font-family: "Montserrat", georgia, sans-serif;
position: absolute;
background-color: rgba(130, 188, 6, 0.750);
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
div.flexcontainer div.BoxThree a::before {
display: flex;
justify-content: center;
align-items: center;
content:"gametitle3";
color: white;
font-size: 2rem;
font-family: "Montserrat", georgia, sans-serif;
position: absolute;
background-color: rgba(130, 188, 6, 0.750);
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}