CSS用relative和absolute实现的图片定位效果
作者:stg609 来源:stg609 blog 发布时间:2008-10-06 21:37:00
今天因为做一个效果的时候需要CSS的定位来实现,于是我就根据自己原来对CSS的了解,用absolute和relative摆弄了好一阵子,总是无法实现满意的效果。不会,咋办呢?搜吧。这年代,啥问题还是得靠搜索引擎。网上一了解才发现自己原来对定位的了解有误,调整了代码,实现了想要的效果,便于以后学习,把经验留在这,嘿嘿。
我想实现的效果很简单,就是在一张图片上加另一个图片,说的有点乱,还是直接看下图好了。
(效果图)
(原图)
相信看了图,大家肯定觉得很眼熟,如果你对实现这种效果很熟悉,就不需要再看下去了哦。如果你感兴趣的话, 就继续往下看吧(不过你最好已经且有了简单的CSS知识)~~
说白了,实现这个效果还是用了position属性的relative和absolut,但是这两个值经常会让人产生“自以为是”的感觉。大家一定要注意,这里的relative和absolute都是有一个参照物的。
在这之前,先来介绍一个概念“常规文档流”,我们一般布局的元素“<h1>This is a header</h1><p>This is some text</p><p>And even more text</p>”都是按照其布局的次序一次排列。这就属于常规文档流。
“position:absolute”是以body元素的左上角为起始点或以距拥有postion:absolute的DIV最近的那个拥有postion属性的父级DIV的左上角为起始点。通过left,top,right,bottom属性来操作。并且该定位方法超出了常规文档流,因此不会对其它元素产生影响(不会导致其它元素位置的改变、大小的改变等)
“postion:relative”是以body元素作为参照物或以其父级DIV作为参照物(不是超始点)。通过left,top,right,bottom属性来操作。
为了说明问题,我们举几个例子来看一下:
效果图:
通过上面这个图,我想大家应该看出什么了吧?
普通的div属于常规文档流,因此它们两个是按照次序布局的。而使用了absolute之后,因为超出了常规文档流,所以并没有对普通div1产生任何影响,而且是以浏览器左上角的起始点进行精确定位。
而用了relative之后,会发现它与absolute不一样,它是以父级div作为参照对象,但不是以父级对象的起始点做为参考点。通过观察上图大家应该可以看出普通div2的长度被拉长了,拉长的距离则恰好是“普通的div2”这几个字的高度。这说明了什么?
这说明relative首先是被当作常规文档流进行处理,也就是说先按照次序进行布局,应该出现在“普通的div2”的下方。如图:
因此,由于使用了relative的那个div高度为100px,因此普通的div2被拉伸,这之后,使用了relative的那个div才按照absolute来处理。
如果大家搞明白了,就可以开始运用这个postion属性的两个值来实现相应的效果了。
要实现开头的那个效果思路如下:
我们可以选有一个div来做图片的容器(并且加上position属性,我设置为relative因为这样可以运用于常规文档流中,且可以相对于窗口的大小而相对静止),然后在该容器中添加一个div(设置position属性为absolute,因为我们希望该层覆盖在原图片上方,如果选用relative则会先根据常规文档流处理,虽然可以通过left、top、bottom、right属性达到覆盖效果,可是同样会影响原div大小),然后调节top,bottom则可实现效果。
相应代码如下:
<div style="position: relative;width: 86px; height: 110px; border: 1px solid; float: left; margin-right: 20px">
<img width="86" height="110" src='1.jpg' alt="" />
<div style="position:absolute;background:url(images/new.gif) no-repeat;width:37px;height:37px;top:0px;"></div>
<div style="position:absolute; top:88px; width: 86px; height: 22px;text-align: center; background: white; filter: alpha(opacity=50);">
片名
</div>
</div>
猜你喜欢
- 因此,在我接触那么多种语言当中,asp是最不严格的一种,是对程序员要求最低的一种。 昨天测试了asp.net、php和asp的运行速度比较,
- 代码如下:'个人代码风格注释(变量名中第一个小写字母表表示变量类型) 'i:为Integer型; 's:为Strin
- 以下是通过Excel 的VBA连接Oracle并操作Oracle相关数据的示例Excel 通过VBA连接数据库需要安装相应的Oracle客户
- 我想大多数的人在编写ASP程序的时候,都碰到过类似的错误信息: Error Number -> 
- 基础知识-----黄金分割法960px宽度的网格设计的好处无需我多说了,下面主要是复习一下如何作图求出960px宽度下的黄金分割点1、首先沿
- 在讲样式表开发管理之前,我想插播一个小知识。前几天看web标准设计组里,看到龍佑康同学问到关于 block 和 inline 的区别。记得以
- 本文介绍了在js和asp中使用FileSystemObject(fso)来: 创建、添加或删除数据,以及读取文件; 移动、复制和删除文件;创
- <SCRIPT language="JavaScript"><!-- Beginfunction mo
- 一.背景在现在的网站中,接入的渠道是越来越多了,技术也是越来越先进,WAP, SMS,EMAIL, 传统的Web, Socket等等,如果连
- Javascript 正常取来源网页的URL只要用: document.referrer就可以了!但,如果来源页是Jav
- <%Function BytesToBstr(body,Cset)dim objstreamset&n
- 以前的Dreamweaver中是没有图片处理功能的,即使你要处理也只能使用CSS中的相关滤镜进行一些效
- 本文列出了初学网页编程中常用到的一些代码和一些技巧,简单实用,您一定用得到。1、oncontextmenu="window.eve
- 这个url的正则表达式判断的js!是比较全面的。它验证的情况包括!IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!
- 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如&
- 打开链接是在新窗口还是原窗口是一个最基础的交互方式。但是很多项目进行中,我们的原型设计并没有仔细考虑链接打开方式。而为了满足运营的需要,选择
- 由于 window.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实
- [sql] -- ===================【创建存储过程】===================== USE [Message
- 在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分。我们常会发现许多“灰色”的应用,他们的出现总是不动声色而又恰如其分,维持了整个
- 感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。需要的朋友可以参考下。下面是html测试代码:<!DOC