覆蓋

Question

<div class="box small"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

    <div class="detail"> for more info click below</div> 
    <div class="read-more"> click</div> 
</div> 

的CSS

.detail{ 
     position: relative; 
} 
.detail:after{ 
    content: ""; 
    display: block; 
    position: fixed; /* could also be absolute */ 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 20%; 
    z-index: 10; 
    background-color: rgba(0,0,0,0.2) 
} 

我婉添加背景這些兩個div：

<div class="detail"> for more info click below</div> 
<div class="read-more"> click</div> 

我不能添加一個包裝DIV，所以我正在使用覆蓋技術：

Demo

我怎麼能相對覆蓋父母的盒子？

Answer 1

我不知道如果我得到你想要的東西的權利，但在這裏我想你正在嘗試做的

.box { 
    padding:20px; 
    border:1px solid #000; 
    position:relative; 
} 

.small { 
    width:200px; 
    height:200px; 
} 

.detail{ 
     position: relative; 
} 
.box:after{ 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    z-index: 10; 
    background-color: rgba(0,0,0,0.2); 
    right:0; 
    bottom:0; 
    height:100%; 
    width:100%; 
} 

和HTML

<div class="box small"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 

    <div class="detail"> for more info click below</div> 
    <div class="read-more"> click</div> 
</div> 

Answer 2

如果你不想包裝這兩個DIV 詳細和讀更多 那就試試這個....

HTML

個

<div class="box small"> 
    <p>Pellentesque habitant morbi tristique senectus et netus et    malesuada fames ac turpis egestas.</p> 
    <div class="detail"> for more info click below</div> 
    <div class="read-more"> click</div> 
</div> 

CSS

.detail,.read-more 
{ 
     position: relative; 
} 

.detail:after,.read-more:after{ 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 10; 
    background-color: rgba(0,0,0,0.2) 
}