一、效果：

效果原图素材

二、HTML

    
        
        
            
    
        
     
            热播电影
        
     
            
                  
      
            
      
            
      
                       忠犬八公的故事
      
        
     
    
    

 

三、CSS

#wraper{    text-align: center;}#film{    position: relative;    width: 190px;    height: 254px;}#film .top{    position: absolute;    top: 0;    left: 0;    width: 53px;    height: 48px;    background: url(../images/p_dot.png) 0px -1027px;}#film .filmname{    position: absolute;    bottom: 0px;    left: 0px;    width: 100%;    text-align: center;    color: Red;    font-size: 24px;    font-family: 华文隶书;    font-weight: bolder;}

 【基础知识】

CSS中的属性position常用的定位主要有：

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

【说明】

1、实例图片来自迅雷看看网站，小图片由于是很多图片构成的，因此设置背景的时候，采用了定位：

　　background: url(../images/p_dot.png) 0px -1027px;

2、小图片和文字要相对于<div id="film">进行绝对定位，因些，需要设定position: relative;，虽然实际上并没有给定它的left、right、top和bottom值。

3、如果没有这个非默认定位，也就是非static定位，absolute定位的参照物会是body，也就是窗体。

4、absolute和relative的区别，主要是定位的参照物不同，relative的参照物是它本身的正常位置。

 

参考网址：