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设置为每个子图层元素。