Jesse Jesse - 1 year ago 79
CSS Question

z-index Not Working with Absolute Position

If you take a look at my test website here you will see that the "Scroll Down" button is overlapping all my content, no matter what z-index I input. Is there a way to fix this issue? I realize that my position is

and that is most likely the issue, but if I state it as
it is no longer set at the bottom of my page.


#scroll-down {
height: 53px;
width: 100%;

display: table-cell;

position: absolute;

color: #fff;

padding-top: 20px;
padding-bottom: 20px;

bottom: 0;
left: 0;

z-index: inherit;

vertical-align: middle;

background-color: rgba(0,0,0,0.5);

cursor: pointer;

transition: all 0.25s ease-in-out;
#scroll-down:hover {
color: #bae9ff;

background-color: #fff;


<div class="site-wrap">

<div class="background-image img-home">

<div class="text">Welcome!</div>

<a id="scroll-down noselect"><div id="scroll-down">Scroll Down<br /><object class="scroll-down-img" height="33" width="50"></object></div></a>


Answer Source

If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.

.top-bar {