CSS定位设立实例——盒子的定位
日期：2014-05-17 浏览次数：20670 次
一、效果：
效果素材
二、HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>无标题页</title>
</head>
<body>
<div id="wraper">
<h3>
热播电影</h3>
<div id="film">
<img src="images/06.jpg" width="190" height="254" alt="电影封面" />
<div class="top">
</div>
<div class="filmname">
忠犬八公的故事</div>
</div>
</div>
</body>
</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、实例图片来自迅雷看看网站http://movie.kankan.com/type,order/movie,rat/，小图片由于是很多图片构成的，因此设置背景的时候，采用了定位：
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的参照物是它本身的正常位置。
参考网址：
http://www.w3school.com.cn/css/pr_class_position.asp
http://www.cnblogs.com/stg609/archive/2008/10/06/1304660.html
