父div 相對定位spa
子 div 絕對定位(文字的話span標籤便可)code
子div 能夠是多個,實現div同位置疊加blog
<div class='a'> <div class='b'></div> <div class='c'> <span>文字</span> </div> <div class='d'></div> </div>
.a{ width:400px; height:400px; position:relative; } .b{ width: 100%; height:100%; background:orange; } .c span{ display: block; padding-top: 40%; text-align: center; z-index: 5; position: absolute; top:0px; left: 0px; width: 100%; color: #fff; } .d{ position: absolute; top:0px; left: 0px; width: 100%; height: 100%; background:black; opacity: 0.5; z-index: 3; }