为什么不溢出：材质图标的隐藏工作？答案

【问题标题】：Why doesn't overflow: hidden work with material icons?为什么不溢出：材质图标的隐藏工作？
【发布时间】：2017-07-19 16:22:56
【问题描述】：

在下面的示例中，为什么overflow: hidden; 不适用于平铺对象？

#tileContainer {
  background-color: gray;
  padding: 10px;
}
.tile {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  width: 120px;
  height: 120px;
  background-color: white;
  overflow: hidden;
}

.tile i {
  opacity: .25;
  position: absolute;
  font-size: 150px;
  left: -10px;
  top: 25px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="tileContainer">
  <div class="tile">
    <i class="material-icons">account_balance</i>
    <div id="tileContent">
      Stuff goes here.
    </div>
  </div>
  <div class="tile">
    <div id="tileContent">
      Stuff goes here.
    </div>
  </div>
</div>

想要的结果更像这样：

【问题讨论】：

标签： css fonts google-material-icons

【解决方案1】：

将position: relative 添加到.tile 时有效。我猜是因为position: absolute 将元素从磁贴流中拉出来。

【讨论】：

我意识到放置瓷砖绝对或可以解决问题......这很糟糕，因为原始行为是我在砌体布局中遇到的问题，即使它们是绝对定位。

【解决方案2】：

因为position: absolute;。看到这个答案：CSS overflow hidden with absolute position。

【讨论】：