Html 页脚中的一个div干扰另一个div
我在页脚中有以下代码，出于某种原因，这部分代码：Html 页脚中的一个div干扰另一个div,html,css,radio-button,footer,Html,Css,Radio Button,Footer,我在页脚中有以下代码，出于某种原因，这部分代码： <!-- save --> <div id="saveWrapper"> <div id="save"> <img src="img/save.png" alt="Save Image" width="32" height="32" id="saveButton" title="Save Image" />
<!-- 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>
<!-- 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>
感谢您的帮助 尝试此添加
z-index:-1
<!-- 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>
#saveWrapper {
z-index:-1;
}
<!-- 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>
-----------
或
第二个选项是
<!-- 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>
在按钮中添加一个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>
然后定义z-index
，如下所示
<!-- 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
<!-- 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>
#saveWrapper {
z-index:1;
}
.form_bt{
position:relative;
z-index:2;
}
HTML
<!-- 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>
<!-- 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>
右键单击要下载的图像。
嗨，谢谢你的工作非常出色。但只有一个问题。我有一些简单的javascript，可以通过单击保存/取消图像来显示和隐藏其中一个div，但现在不会触发？它仅在z索引为正时触发答案中的第二个选项不需要负z索引。你可以用这个。
<!-- 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>