长话短说,我试图在单击按钮时使绿色条向上移动到蓝色条上方(尽管我还没有添加任何 JS。出于某种原因,无论我尝试什么我的按钮不会工作。我已经尝试使用按钮标签和输入标签来制作按钮,但没有任何区别。我的代码目前位于:
body {
margin: 0;
padding: 0;
text-align: center;
}
#container{
z-index: -1;
position: relative;
background-color: brown;
height: 800px;
width: 800px;
margin: 0 auto;
margin-top: 75px;
}
#fullLoad{
z-index: 1;
position: relative;
height: 600px;
width: 200px;
background: blue;
left: 300px;
top: 100px;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
#loader{
border-radius: 20px 20px 20px 20px;
z-index: 2;
position: absolute;
height: 600px;
width: 200px;
background: green;
top: 600px;
}
#btn{
position: absolute;
top: 20px;
right: 362px;
padding: 5px 20px;
border-radius: 5px;
background: gold;
font-family: sans-serif;
font-size: 1.8em;
color: #424242;
}
<div id="container">
<div id="fullLoad">
<div id="loader"></div>
</div>
<input id="btn" type="button" value="Go !" onclick="alert('Hello')">
</div>
最佳答案
你不能点击按钮,因为 fullLoad 和 loader div 被放置在其父元素(容器 div)的前面,z-index 为 1 和 2。按钮继承了默认的 z-index容器 div,这也将它放在堆栈顺序的后面。
关于html - 我似乎无法让我的 html 按钮标签工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52302814/