为什么不溢出:使用材质图标隐藏工作?

时间:2017-07-19 16:22:57

标签: css fonts google-material-icons

在下面的示例中,为什么overflow: hidden;不能处理tile对象?

#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>

期望的结果更像是这样:

enter image description here

2 个答案:

答案 0 :(得分:0)

position: relative添加到.tile时,它会有效。我想这是因为position: absolute将元素拉出了瓷砖的流程。

答案 1 :(得分:0)

这是因为position: absolute;。 请参阅此答案:CSS overflow hidden with absolute position