Question

我正在开发一个响应式网站，我有一个问题，我从来没有想过我可以拥有它xD

我在div包装器中有一个图像...并且只想放置一个图标字体：在选择器之后，当包装器/ img有一个类...

麻烦来自z-index，对于z-index工作我需要“绝对”那个img，但如果我这样做包装器的高度不包含img ...而且我不能把我的：after元素相对于img或者好包装

我在这里有这个问题：http://codepen.io/MrViSiOn/pen/VYpedg

   * {
     box-sizing: border-box;
   }
   div {
     float: left;
     width: 24%;
     height: auto;
     margin-right: 1em;
     border: 1px solid blue;
     padding: 1em;
     position: relative;
     overflow: visible;
   }
   img {
     max-width: 100%;
     border-radius: 50%;
     padding: 15px;
     border: 1px solid #aaa;
     z-index: 10;
     position: absolute;
   }
   div:after {
     content: "\e60c";
     position: absolute;
     color: #234;
     font-family: "Nubelo";
     bottom: 0;
     left: 45%;
     font-size: 2em;
     z-index: 1;
   }

<link rel="stylesheet" href="http://i.icomoon.io/public/temp/d53e6aab62/Nubelo/style.css">
<div>
  <img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>
<div>
  <img src="http://assets.worldwildlife.org/photos/2090/images/hero_small/Sumatran-Tiger-Hero.jpg?1345559303" />
</div>

谢谢，如果您需要更多信息，请告诉

Answer 1

谢谢Marcel Burkhard ......

我不知道使用position：relative启用z-index。

这就是答案！

z-index，定位元素绝对

1 个答案: