gpt4 book ai didi

html - 页脚中的一个 div 干扰另一个

转载 作者:搜寻专家 更新时间:2023-10-31 19:26:12 25 4
gpt4 key购买 nike

我在页脚中有以下代码,出于某种原因这部分:

<!-- save -->
<div id="saveWrapper">
<div id="save">
<img src="img/save.png" alt="Save Image" width="32" height="32" id="saveButton" title="Save Image" />
</div>
<div id="textdownload">
<img src="img/cancel.png" alt="Cancel" width="32" height="32" id="resetButton" title="Continue Drawing" />
Right click the image to download.
</div>
</div>

它正在干扰它正下方的这部分。

        <!-- brush colour options -->
<input type="radio" name="colour" id="red" value="red" />
<label for="red"><img src="img/red.png" alt="Red"></label>
<input type="radio" name="colour" id="green" value="#00ff00" />
<label for="green"><img src="img/green.png" alt="Green" /></label>
<input type="radio" name="colour" id="blue" value="blue" />
<label for="blue"><img src="img/blue.png" alt="Blue" /></label>
<input type="radio" name="colour" id="black" value="black" />
<label for="black"><img src="img/black.png" alt="Black" /></label>
<input type="radio" name="colour" id="white" value="white" />
<label for="white"><img src="img/white.png" alt="White" /></label>
<input type="radio" name="colour" id="random" value="random" />
<label for="random"><img src="img/random.png" alt="Random" /></label>

<img src="img/spacer.png" width="32" height="32">

<!-- brush size options -->
<input type="radio" name="size" id="1" value="1" />
<label for="1"><img src="img/1p.png" alt="1 Point"></label>
<input type="radio" name="size" id="2" value="2" />
<label for="2"><img src="img/2p.png" alt="2 Point" /></label>
<input type="radio" name="size" id="3" value="3" />
<label for="3"><img src="img/3p.png" alt="3 Point" /></label>
<input type="radio" name="size" id="4" value="4" />
<label for="4"><img src="img/4p.png" alt="4 Point" /></label>
<input type="radio" name="size" id="10" value="10" />
<label for="10"><img src="img/10p.png" alt="10 Point" /></label>

<img src="img/spacer.png" width="32" height="32">

<!-- clear canvas -->
<input type="image" id="clear" value="Clear" src="img/clear.png">
</div>

问题是上面的单选按钮不可点击或可选择,我不明白为什么。

这是两个元素的附带 CSS:

/* Styling for radio buttons */
.input_hidden {
position: absolute;
left: -9999px;
}

.selected {
background-color: #ccc;
}

#colour label {
display: inline-block;
cursor: pointer;
}

#colour label:hover {
background-color: #efefef;
}

#colour label img {
padding: 3px;

}

/* Footer styling */
footer{
background-color: #323232;
bottom: 0;
box-shadow: 0 -1px 20px rgba(0,0,0,0.4);
height: 42px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}

#saveWrapper {
position: absolute;
}

#saveButton {
float: right;
margin-left: 590px;
margin-top: 5px;
position: relative;
z-index: 9999;
cursor: pointer;
overflow: hidden;
}

#textdownload {
display: none;
position: absolute;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 12px;
float: right;
margin-top: 5px;
margin-left: 630px;
width: 300px;
overflow: hidden;
}

如果我删除页脚外的第一个代码片段,单选按钮是否正常工作?

感谢任何帮助!

最佳答案

尝试添加 z-index:-1;

#saveWrapper { 
z-index:-1;
}

Live demo

------------

或者第二个选项是

在你的按钮中添加一个div

并像这样定义z-index

CSS

#saveWrapper { 
z-index:1;
}
.form_bt{
position:relative;
z-index:2;
}

HTML

<!-- save -->
<div id="saveWrapper">
<div id="save">
<img src="img/save.png" alt="Save Image" width="32" height="32" id="saveButton" title="Save Image" />
</div>
<div id="textdownload">
<img src="img/cancel.png" alt="Cancel" width="32" height="32" id="resetButton" title="Continue Drawing" />
Right click the image to download.
</div>
</div>


<div class="form_bt"> <!-- brush colour options -->
<input type="radio" name="colour" id="red" value="red" />
<label for="red"><img src="img/red.png" alt="Red"></label>
<input type="radio" name="colour" id="green" value="#00ff00" />
<label for="green"><img src="img/green.png" alt="Green" /></label>
<input type="radio" name="colour" id="blue" value="blue" />
<label for="blue"><img src="img/blue.png" alt="Blue" /></label>
<input type="radio" name="colour" id="black" value="black" />
<label for="black"><img src="img/black.png" alt="Black" /></label>
<input type="radio" name="colour" id="white" value="white" />
<label for="white"><img src="img/white.png" alt="White" /></label>
<input type="radio" name="colour" id="random" value="random" />
<label for="random"><img src="img/random.png" alt="Random" /></label>

<img src="img/spacer.png" width="32" height="32">

<!-- brush size options -->
<input type="radio" name="size" id="1" value="1" />
<label for="1"><img src="img/1p.png" alt="1 Point"></label>
<input type="radio" name="size" id="2" value="2" />
<label for="2"><img src="img/2p.png" alt="2 Point" /></label>
<input type="radio" name="size" id="3" value="3" />
<label for="3"><img src="img/3p.png" alt="3 Point" /></label>
<input type="radio" name="size" id="4" value="4" />
<label for="4"><img src="img/4p.png" alt="4 Point" /></label>
<input type="radio" name="size" id="10" value="10" />
<label for="10"><img src="img/10p.png" alt="10 Point" /></label>

<img src="img/spacer.png" width="32" height="32">

<!-- clear canvas -->
<input type="image" id="clear" value="Clear" src="img/clear.png">

</div>

Demo for this

关于html - 页脚中的一个 div 干扰另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13722582/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com