记录-div绝对定位针对手机浏览器的区别

最近搞个wap ，有一个需求就是一些文字描述定位到一张图片上的某个地方，按照以往的方式直接通过定位div

position: absolute;

PC chrome 模拟手机显示没问题！

但是，在ipad和安卓平板做测试，发现文字描述并没有定位打图片中，发现消失呢！

研究了好久，发现是代码的位置问题。

修改前：

<figure>
<a href="default.htm"><img src="css/images/banner1.jpg"></a>
<figcaptiontop>
<hgroup>
<h3 class="clearfix">
<a href="javascript:void(0)" id="JiangLi"><strong></strong></a></h3>
</figcaptiontop>
<figcaptionbottom>
<h3 class="clearfix">
<span>（108作品）</span>
</h3>
</figcaptionbottom>
</figure>

这样父元素就会把子元素遮盖了

如果把figcaptiontop提到外层和父元素同级，则就不会被遮盖了 

修改后：

<figure>
<a href="default.htm"><img src="css/images/banner1.jpg"></a>
</figure>
<figcaptiontop>
<hgroup>
<h3 class="clearfix">
<a href="javascript:void(0)" id="JiangLi"><strong></strong></a></h3>
</figcaptiontop>
<figcaptionbottom>
<h3 class="clearfix">
<span>（108作品）</span>
</h3>
</figcaptionbottom>

这样无论是安卓浏览器还是IE都显示在最顶层！

 

转载于:https://www.cnblogs.com/CrazyAnts/p/4920065.html