今天因为做一个效果的时候需要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则可实现效果。

      相应代码如下:

效果代码
posted on 2008-10-06 15:31  stg609  阅读(4595)  评论(20编辑  收藏  举报
分享按钮