I'm having an issue with my html / css. I want to have a "learn more" box in every one of my three sections, located at the bottom middle of each one.
CSS
#learn {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
background-color: rgba(255, 255, 255, 0.6);
z-index:1;
margin-bottom: 20px;
left:50%;
width: 150px;
margin-left: -75px;
text-align: center;
line-height: 50px;
}
#learn a {
color: black;
font-weight: bold;
}
It seems to work fine in the top box:
<div id="learn"><a href="#">Learn More</a>
However in the section below I use pretty much the same code:
<section id='a1' style="height:100%;background-color:white;">
<div class="container"></div>
<div id="learn"><a href="#">Learn More</a>
</section>
However this time the learn more box doesn't appear. What is it I am doing wrong? I have played around with position: relative without much luck.
TLDR: The learn more box should be at the bottom middle of the header and sections, it only appears in the header.
P.s I tried to strip down my code and css but didn't want to strip out any more as I believe its inclusion will highlight which options will / wont work.
