Относительно знал по z-index.
Я не могу за свою жизнь заставить следующий Div лежать поверх моего нижнего колонтитула. Я экспериментировал с z-индексом (я знаю, что оба элемента должны иметь положение: относительное / абсолютное к работе), и, несмотря ни на что, нижняя половина моего div все еще лежит под нижним колонтитулом. По какой-то причине кнопка перебирает все, и z-index влияет только на эту кнопку!
Вот мой код:
http://jsfiddle.net/dyhg24mo/8/
HTML:
<!--CTA DIV-->
<div id="ctaDiv">
<h1>Ready To Build Your Community?</h1>
<button>Get Started For Free</button>
</div>
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</p>
</footer>
CSS:
/*CTA Section*/
#ctaDiv {
position: relative;
z-index: 2;
top: 90px;
border-radius: 15px;
margin: 0 auto;
text-align: center;
height: 200px;
width: 600px;
-webkit-box-shadow: 2px 2px 16px 8px rgba(0,0,0,0.1);
-moz-box-shadow: 2px 2px 16px 8px rgba(0,0,0,0.1);
box-shadow: 2px 2px 16px 8px rgba(0,0,0,0.1);
}
#ctaDiv h1 {
font-size: 1.5em;
padding-top: 50px;
}
#ctaDiv button {
background-color: #FE52C0;
border: none;
color: white;
font-family: 'Poppins', sans-serif;
border-radius: 50px;
height: 55px;
width: 300px
}
/*FOOTER*/
footer {
position: relative;
z-index: 0;
height: 400px;
width: 100%;
background-color: #00252E;
}
.attribution {
clear: both;
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
Я рассмотрел похожие проблемы со стековым потоком, но не могу найти ни одной, соответствующей моей.
У кого-нибудь есть идея? Я чувствую, как он смотрит мне в лицо