CSS在定位元素

Question

我有這樣的代碼：

<div class="thumbnail"> 
    <div class="image_thumbnail"> 
     <div class="category"></div> 
     <div class="category2"></div> 
    </div> 
    <div class="info_thumbnail"></div> 
    <div class="footer_thumbnail"> 
     <div class="stars_empty"></div> 
    <img class="views" src="images/views.png">10 
    </div> 
</div> 

如何我一定要對CSS的工作有這樣的效果呢？ 綠色div應該是該類別div

謝謝！

Answer 1

​<div id="container"> 
    <div class="box"></div> 
    <div class="tab"></div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 



​#container{ 
position:relative; 
} 

​.​box{ 
position:relative; 
left:10px; 
top:10px; 
height:150px; 
width:100px; 
border-radius:8px; 
border:2px solid #666; 
background-color:#DDD; 
z-index:5; 
} 

.tab { 
position:absolute; 
left:105px; 
top:35px; 
width:25px; 
height:40px; 
background-color:green; 
border-radius:5px; 
box-shadow: 3px 3px 3px #888; 
} 

演示：http://jsfiddle.net/Q7RkR/

Answer 2

你想做什麼並不是很清楚。 無論如何，爲了處理超出位置，您應該爲每個縮略圖都有一個主容器;設置位置：相對於主容器，並將position：absolute設置爲每個子圖層元素。