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

日期：2013-11-27  来源：攀枝花惠康网络公司

弄懂了膳缦沔这些，那么写膳缦沔的暗影效不美观就不盘问题了，也很好理解了。看下面这个例子：http://www.css88.com/demo/relative/relative1.html

实现暗影效不美观体例有良多，一般复杂一点的外发光式的暗影都使用png作为布景图片来实现暗影，今天做的这个斗劲简单，暗影是纯色的，所以可以直接使用布景颜色，图片的位移一下就能使图片发生暗影效不美观。图片的位移可以使用相对定位（position:relative）和top，left等值来实现，这里我们首先要理解相对定位的真正浸染。

今天做了近似下图的一个暗影效不美观：

父级元素相对定位（position:relative）一般被我们用来和子元素绝对定位（position:absolute）配合，使子元素定位。绝对定位将对象年夜文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如不美观不存在这样的父对象，则依据 body 对象。而其层叠经由过程 z-index 属性界说；

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

那么相当定位是相对于什么定位呢？我感受我们可以这么理解：相对定位是相对于该元素自己的定位。有人说相对定位很”自私”,因为相对定位一个最年夜特点是：自己经由过程定位跑开了还占用着原本的位置，不会让给他四周的诸如文本流之类的对象。相对定位也斗劲自力，做什么事它自己说了算，要定位的时辰，它是以自己自己地址位置偏移的（相对对象自己偏移）。再拿前边作好比来解，那么此时西瓜似乎是有魔法的，如不美观西瓜经由过程相对定位在水桶中偏移了你会看到一个现实糊口中不存在的现象：水中有一个处所水凹下去了，四周的水不能填补它，西瓜看起来在旁边，如不美观搅动一下桶中的水，阿谁凹的位置会发现改变（文本流对相对定位对象还存在影响），可是凹处到西瓜呈现的距离始终连结一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，境傺有两小我在统一层楼水平移动的过程中会有碰头的机缘。

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