如果您在这里查看我的测试网站,您将看到“向下滚动”按钮与我的所有内容重叠,无论我输入什么 z-index。有没有办法解决这个问题?我意识到我的立场是absolute,这很可能是问题所在,但如果我将其声明为relative它不再设置在我的页面底部。
#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;
}Run Code Online (Sandbox Code Playgroud)
<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>
</div>Run Code Online (Sandbox Code Playgroud)