相对定位及简单的阴影效果

今天做了类似下图的一个阴影效果:
2009-10-23_224957

实现阴影效果方法有很多,一般复杂一点的外发光式的阴影都使用png作为背景图片来实现阴影,今天做的这个比较简单,阴影是纯色的,所以可以直接使用背景颜色,图片的位移一下就能使图片产生阴影效果。图片的位移可以使用相对定位(position:relative)和top,left等值来实现,这里我们首先要理解相对定位的真正作用。

父级元素相对定位(position:relative)一般被我们用来和子元素绝对定位(position:absolute)配合,使子元素定位。绝对定位将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义;

但是相对定位(position:relative)是对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置,这里可以确定相对定位没有脱离文档流。

那么相当定位是相对于什么定位呢?我觉得我们可以这么理解:相对定位是相对于该元素本身的定位。有人说相对定位很”自私”,因为相对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解,那么此时西瓜似乎是有魔法的,如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象:水中有一个地方水凹下去了,周围的水不能填补它,西瓜看起来在旁边,如果搅动一下桶中的水,那个凹的位置会发现改变(文本流对相对定位对象还存在影响),但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响,因为对象并没有真正脱离文本流,就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

要深入理解这一点可以看一下来自网上的例子:https://www.css88.com/demo/relative/relative2.html

弄懂了上面这些,那么写上面的阴影效果就不成问题了,也很好理解了。看下面这个例子:https://www.css88.com/demo/relative/relative1.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 相对定位及简单的阴影效果

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    嗯 不错 不错

    柴鸡不柴9年前 (2009-10-24)回复
  2. #-48

    很好,可惜的是就是还需要一个div来实现背景颜色,要是能通过定位将图的背景色和图产生错位就好了,刚看文章的时候我以为就是这种实现方式呢,哈。

    DeadFire9年前 (2009-10-24)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏