《网页中的绝对定位相对定位.doc》由会员分享，可在线阅读，更多相关《网页中的绝对定位相对定位.doc（3页珍藏版）》请在金锄头文库上搜索。
1、网页中的绝对定位与相对定位绝对定位：position:absolute相对定位：position:relative如果有父层，那么所有的定位都是相对于父层开始算起，如果没有父层那么绝对定位就相对于屏幕开始，相对定位就相对与前一个相对定位的层定位。一般都要有一个父层。一个网页中有多个层布局时，绝对定位都是相对于父层或者屏幕，相对定位都是相对于前一个相对定位的层定位的。看下面的例子：无标题文档 #Layer1 position:relative;width:900px;height:800px;background-image: url(1.jpg);background-color: #00CC
2、FF;margin:auto;#Layer2 position:relative;width:200px;height:115px;z-index:1;background-color: red;#Layer3 position:absolute;width:250px;height:500px;z-index:2;left: 1px;top: 105px; background-color:#CCCC33;#Layer4 position:absolute;width:898px;height:100px;z-index:3;left: 1px;top: 2px;background-col
3、or: #CC6633;#Layer5 position:absolute;width:200px;height:500px;z-index:4;left: 700px;top: 105px;background-color: #FF9933;#Layer6 position:absolute;width:435px;height:auto;z-index:5;left: 263px;top: 105px;background-color: #666600;- 3 4 5 6看效果：注：1号是父层，2号是相对定位其余的是绝对定位解释一下代码中的一些含义：width:宽度;height:高度background-image: url(1.jpg);添加的背景图片名字为1.jpgbackground-color: #00CCFF; 添加的背景颜色margin:auto; 浏览器自动计算z-index：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
