HTML – 页脚中的一个div干扰另一个

概述我在页脚中有以下代码,由于某种原因这一部分： <!-- save --> <div id="saveWrapper"> <div id="save"> <img src="img/save.png" alt="Save Image" width="32" height="32" id="saveButton" titl 我在页脚中有以下代码,由于某种原因这一部分：

<!-- 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.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 > <!-- 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干扰另一个全部内容，希望文章能够帮你解决HTML – 页脚中的一个div干扰另一个所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。