问个关于DIV加了z-index后的问题_html/css_WEB-ITnose

div  z-index

最近遇到了个问题，望高手解答写，请先看下面的代码

  
  

我做的是一个图片上加文字的效果，in利用z-index浮文字在img上面
由于out没有给高度，这样就造成了img挡住了之后的元素。
如果给out加高度就可以正常显示，但是因为有很多不同的图片，out需要不同的高度，所以不能给定高度...
不知道表达清楚没有，望高手解决

回复讨论(解决方案)

img 挡住后面的元素，这不科学啊。后面的 .in 设置 position:absolute;top:0;left:0;

<style>.out{position:relative;}.out .in{position:absolute;top:0;left:0;z-index:1;font-size:30px;background-color:rgba(255,0,0,.3);color:#fff;}</style><div class="out">	<img src="/static/imghwm/default1.png"  data-src="http://img.china.alibaba.com/images/trade/other/091231/test1.jpg"  class="lazy"      style="max-width:90%" alt="" />	<div class="in">cover</div></div><div class="out bd">	<img src="/static/imghwm/default1.png"  data-src="http://img.china.alibaba.com/images/trade/other/091231/test2.jpg"  class="lazy"      style="max-width:90%" alt="" />	<div class="in">cover</div></div>

img 挡住后面的元素，这不科学啊。后面的 .in 设置 position:absolute;top:0;left:0;

<style>.out{position:relative;}.out .in{position:absolute;top:0;left:0;z-index:1;font-size:30px;background-color:rgba(255,0,0,.3);color:#fff;}</style><div class="out">	<img src="/static/imghwm/default1.png"  data-src="http://img.china.alibaba.com/images/trade/other/091231/test1.jpg"  class="lazy"      style="max-width:90%" alt="" />	<div class="in">cover</div></div><div class="out bd">	<img src="/static/imghwm/default1.png"  data-src="http://img.china.alibaba.com/images/trade/other/091231/test2.jpg"  class="lazy"      style="max-width:90%" alt="" />	<div class="in">cover</div></div>

找到问题了，原来是我给img标签也加了position和z-index，所以父div没有加高度的情况下不会撑开，谢谢~

好多分，谢谢。