大佬教程收集整理的这篇文章主要介绍了html5 – 如何在类似地铁的Web GUI中定位图标？ (包括图像)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Index2</title> <style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } html{ font-family:Verdana,Geneva,sans-serif; font-size:14px; } div.tiles{ BACkground-color:black; padding:50px; } div.tiles div{ border-radius:2px; padding:10px; margin:5px; color:white; BACkground-color:#666; display:marker; cursor:pointer; float:left; width:25px; height:25px; } div.tiles div:hover{ transition:BACkground-color 1s; -moz-transition:BACkground-color 1s; -webkit-transition:BACkground-color 1s; BACkground-color:#060; -moz-transform:rotate(6deg); } div.tiles div.icon{ position:relative; bottom:0px; left:0px; z-index:10; BACkground-color:red; } div.tiles div.w1{width:25px;} div.tiles div.w2{width:80px;} div.tiles div.w3{width:160px;} div.tiles div.w4{width:190px;} div.tiles div.h1{height:25px;} div.tiles div.h2{height:80px;} div.tiles div.h3{height:160px;} div.tiles div.h4{height:190px;} </style> </style> </head> <body> <div class="tiles clearfix"> <div class="w4 h2"> mattberg@live.com <div class="icon">icon</div> </div> <div class="w4 h2"> RSS </div> <div class="w4 h2"> 13 </div> <div class="w2 h2"> IE </div> <div class="w2 h2"> Photo </div> <div class="w4 h2"> Now Playing </div> <div class="w4 h2"> Photo <div class="icon">icon</div> </div> <div class="w2 h2"> Shop </div> <div class="w2 h2"> SMS </div> <div class="w4 h2"> Weather <div class="icon">icon</div> </div> <div class="w4 h2"> Investment </div> <div class="w1 h1"> Lilly </div> <div class="w1 h1"> Lilly </div> <div class="w1 h1"> Lilly </div> <div class="w1 h1"> Lilly </div> <div class="w1 h1"> Lilly </div> <div class="w1 h1"> Lilly </div> <div class="w1 h1"> Lilly </div> </div> </body> </html>
我在div中定位图标元素时遇到问题.这就是我所拥有的：
这就是我想要的：
换句话说,我希望能够绝对地将元素放置在平铺的div元素中.我尝试了各种CSS定位技术(相对,固定,绝对)但无法解决它.我怀疑是因为瓷砖是浮动元素？
.tiles > div { float: left; position: relative; } .tiles > div .icon { position: absolute; bottom: 0; left: 0 }
通过相对定位,对于其绝对定位的子项,tile div变为containing block.当顶部和左侧为零或未定义时,相对元素定位为just like正常(静态)元素.
以上是大佬教程为你收集整理的html5 – 如何在类似地铁的Web GUI中定位图标？ (包括图像)全部内容，希望文章能够帮你解决html5 – 如何在类似地铁的Web GUI中定位图标？ (包括图像)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。