在下面的示例中,为什么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>
期望的结果更像是这样:
答案 0 :(得分:0)
将position: relative
添加到.tile
时,它会有效。我想这是因为position: absolute
将元素拉出了瓷砖的流程。
答案 1 :(得分:0)
这是因为position: absolute;
。
请参阅此答案:CSS overflow hidden with absolute position。