divcss盒子之绝对定位和相对定位.docx

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（4）相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，能够看到文本围绕在它右边，可是后来用相对定位方式把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还能够看到文本流没有发生自动填补流动。

因此这种直接的相对定位方式较少用，因为重定位对象后原来位置空了一块。

相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以够相对它进行方便的绝对定位了（请注意看后面的实例）。

DOCTYPEhtmlPUBLIC"-ox1{

background-color:

#3CF;

height:

200px;

width:

200px;

}

.box2{

background-color:

#6C6;

height:

100px;

width:

100px;

position:

relative;

float:

left;

top:

-120px;

}

-->

[相对定位对象会占据原有位置]此刻绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能围绕在它右边，当绿色小盒子用相对定位方式重定位到外边去了，文字仍是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（5）相对定位的对象不能够重叠。

这一点或许比较难理解，先来如此理解吧，因为相对定位的对像没有离开文本流，就像两个仍是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，若是能够就意味着两个人共享一块地方了。

在下面的实例中，两个小盒子都恰好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。

上面两个盒子我再用相对定位的方式对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方仍是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，若是不设定，即便有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。

DOCTYPEhtmlPUBLIC"-ox1{

background-color:

#33CCFF;

height:

200px;

width:

210px;

padding:

5px;

}

.box2{

background-color:

#66CC66;

height:

100px;

width:

100px;

position:

relative;

float:

left;

left:

100px;

}

.box3{

background-color:

#CC99FF;

height:

100px;

width:

100px;

position:

relative;

float:

left;

right:

100px;

}

-->

我家在左侧

我家在右边

相对定位对象是在正常文本流中移动的，所以它的存在仍是会影响文本流的布局，若是是绝对定位，这些文本应向上流入上方两个盒子的底部了。

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（6）高度自适应的妙用。

在下面实例中，右边的紫色小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但咱们又能够通过绝对定位方式把它始终定位在父盒子的右上角。

同理，咱们也能够只设定高度而让宽度自动随内容增加而变宽。

DOCTYPEhtmlPUBLIC"-ox1{

background-color:

#33CCFF;

height:

500px;

width:

500px;

position:

relative;

}

.box2{

background-color:

#CC99FF;

width:

100px;

position:

absolute;

right:

3px;

top:

3px;

text-align:

center;

line-height:

15pt;

}

.box3{

width:

390px;

height:

500px;

position:

absolute;

left:

0px;

top:

0px;

line-height:

15pt;

border-right:

thindashed#999;

}

-->

右边的小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但咱们又能够通过绝对定位把它始终定在父盒子的右上角。

博客学堂

博客在线

博客进阶

博客代码

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（7）给包括块一个高度，或说给定位对象的父级设定一个高度。

不然或许显示的结果并非是你想要的。

在下面的例子中，若是你本意要实现下面效果：

把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，若是你删除box1的高度会怎么样呢？

自己测试一下吧。

DOCTYPEhtmlPUBLIC"-ox1{

background-color:

#33CCFF;

width:

200px;

height:

200px;/*若是不设定那个高度，或许显示的结果并非是你想要的*/

}

.box2{

background-color:

#CC99FF;

height:

100px;

width:

100px;

position:

relative;

bottom:

-100px;

}

-->

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（8）放置绝对定位对像到可视区外会出现转动条。

一般情形下，绝对定位是用来方便定位网页要看得见元素的，而不是拿它来隐藏对象的，一般隐藏对象常常利用到display与margin，若是你试图把绝对定位的对象移出可视区域，嘿嘿，阅读器会为你预备转动条去看望它。

DOCTYPEhtmlPUBLIC"-ox{

background-color:

#996699;

height:

200px;

width:

270px;

background-image:

urlno-repeat;

background-position:

centercenter;

position:

absolute;

left:

900px;

top:

0px;

}

.box2{

height:

200px;

width:

270px;

border:

1pxdashed#996699;

}

-->

这是右边对象原来所在的位置，即没有被给予定位属性前的位置

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（9）放置相对定位对像到可视区外不会出现转动条。

此现象专门好理解，因为相对定位对象原来位置没有变，原来位置没有出去转动条就不会出现。

在下面实例中，若是你缩小阅读器窗口，相对定位的对象还会出现完全消失的情形呢。

DOCTYPEhtmlPUBLIC"-ox{

background-color:

#996699;

height:

200px;

width:

270px;

background-image:

urlno-repeat;

background-position:

centercenter;

position:

relative;

left:

900px;

}

.box2{

height:

200px;

width:

270px;

position:

absolute;

border:

1pxdashed#996699;

}

-->

虚线框是右边盒子原来的位置，即用了相对定位后，把对象从头定位到了右边，但对象的位置其实还在这里，或说对象实际上并无越出阅读器可视区域，所以不会出现转动条。

我说过相对定位的的盒子原有位置是不会被占用的，但我为何能够在这里写说明呢，这是因为我用了绝对定位，我只是为了方便说明才如此做的，请不要误解了。

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

（10）定位的特殊值情形。

若是定位设置是如此的：

position:

relative，right:

200px，left:

10px会出现什么情形呢？

一边叫对象向右偏移10px，另一边又叫对象向左偏移200px，究竟是听那里的呢，仍是那个先，那个后呢。

针对这种矛盾情形，CSS规定只听左侧的left，而右边怎么设置都被重定为-left,即-left=right。

上下值top与bottom矛盾的话，就以top为准，所以在下面的实例中，你如何改变right的值，对象位置不会发生改变的。

DOCTYPEhtmlPUBLIC"-ox1{

background-color:

#33CCFF;

width:

200px;

height:

200px;

}

.box2{

background-color:

#CC99FF;

height:

100px;

width:

100px;

position:

relative;

right:

200px;/*此值总被以为是-left=-10px,所以你怎么改它都不会影响到布局*/

left:

10px;/*这里设定了两个定位值，可是它们是矛盾的，所以现在将以左侧为准，若是是上下类型错误，则以上边定位数值为准*/

}

-->

[Ctrl+A全数选择提示：

你可先修改部份代码，再按运行]

4．综合实例见证定位的魅力

先看最终演示效果，具体教程请继续关注，本人正抽暇整理。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTMLTransitional//EN""">

--

*{

margin:

0px;

padding:

0px;

}

body{

margin:

10px;

font-size:

13px;

}

a:

link{

color:

#666;

text-decoration:

none;/*去除链接下划线*/

}

a:

visited{

color:

#666;

text-decoration:

none;

}

a:

hover{

color:

#F90;

}

h3{

color:

#FFF;

background-color:

#F90;

width:

100px;

padding-top:

3px;

text-align:

center;

}

ul{

width:

300px;

border-top:

1pxsolid#F60;/*使其上边有一线条，与题目h3吻合*/

}

ulli{

padding:

5px;

border-bottom:

1pxsolid#CCC;

list-style:

none;/*去除列表样式，这对于标准阅读很重要*/

}

a{

position:

relative;/*设置其定位方式为相对定位，等一下内部信息面板就可以够相对它定位*/

display:

block;/*让链接以块状呈现，如此不用点中链接文字就可以够响应链接*/

}

adiv{

display:

none;/*初始化信息面板不显示*/

}

a:

hover{background:

#fff;}/*IE7以下版本A状态伪类bug*/

a:

hoverdiv{

position:

absolute;

padding:

5px;

display:

block;

width:

245px;/*只给出宽度，高让它随内容多少自动调整*/

left:

150px;/*这是相对父级A的定位*/

top:

20px;

border:

1pxsolidrgb（91,185,233）;

background-color:

rgb（228,246,255）;

z-index:

999;/*把信息面板提到一个较高的位置，使链接文字太长时不会与面板重叠,但这只对FF有效*/

}

aimg{

width:

80px;

height:

80px;

border:

none;/*去除图片边框，默许情形下，链接内的图片在标准阅读器会出现边框*/

display:

block;

position:

absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同阅读器正常显示会更麻烦*/

top:

5px;/*这里的5px是与信息面板大盒子的填充一样的*/

left:

5px;

}

dl{

width:

160px;

float:

right;

color:

#9

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

divcss 盒子 绝对 定位 相对

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。