CSS定位设置实例——盒子的定位

一、效果：

效果原图素材

二、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="data: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

转载于:https://www.cnblogs.com/WestGarden/archive/2012/09/15/3138323.html

CSS定位设置实例——盒子的定位相关推荐

CSS大小设置实例——盒子模型
一.浏览器效果和Dreamweaver设计视图: 二.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
xml控制html样式,XML与CSS综合设置实例
XML与CSS综合设置实例 HTTP代码如下: @charset "utf-8"; @charset "utf-8"; bookname{ display:bl ...
php中调用css设置表格,CSS表格设置实例
4.CSS表格设置 /*第一步:给整个表格以及内部的所有单元格加上边框*/ table,th,td { border: 1px solid #333; } /*第二步:将整个表格以及内部单元格的边框全 ...
php中文字怎么上下居中,CSS怎么设置垂直居中？
在我们开发前端页面的时候,为了让页面效果美观,会出现需要垂直居中效果的地方.本章就让我们来了解一下用css如何设置垂直居中,详细介绍一下设置文字与div盒子的垂直居中的几种方法.有一定的参考价值,有需 ...
CSS笔记（八）盒子模型-----定位
前言首先思考一下为什么会用到定位,定位都可以作用在哪些方面: 1.当某个元素可以自由的在盒子内移动,并且压住其它盒子 2.当我们滚动窗口时,盒子是固定屏幕某个位置的以前的标准流和浮动无法实现上述效 ...
CSS选择器+盒子模型+定位( 基础笔记 )
CSS学习笔记 CSS-层叠样式表-网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式,而最终我们能看到只是网页的最上边的一层-总之一句话,CSS用来设置网页中元素的样式使用C ...
CSS列表，定位和实例
每一个成功者都有一个开始.勇于开始,才能找到成功的路! 今天让我们继续努力吧!加油! 列表 CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志. CSS 列表从某种意义上讲,不是描 ...
深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子. 哪些因素控制了这些 ...
html图片定位代码怎么写,如何在css中设置插入图片定位
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间.下面就给大家具体说一下 ,如何通过css属性来定位图片. 如何在css中设置插入图片定位首先设置固定图片的css属性是 ...

CSS定位设置实例——盒子的定位

CSS定位设置实例——盒子的定位相关推荐

最新文章

热门文章