在网页中，如果需要left与top属性生效，就必须为这个div的style属性加入position:absolute，这样，此div才能游离于整体的div布局之外，也就是说，你没有加position:absolute之前，所有的div遵循我在《【css】关于div的对齐与网页布局》（点击打开链接）所提到的，各种各样布局。
例如下面的代码：
<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>
就得到如下的效果：
立即学习“前端免费学习笔记（深入）”；
如果把position:absolute去掉，那么left与top属性是不起作用的，也就是下面的代码：
<div style="left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>
这个加了黑色方框的图层，完全没有按照预想的位置移动。
但不是说，这个left与top就是距离浏览器左上角的距离。它是距离上级div的距离，如果没有上级div，那么才是距离浏览器左上角的距离，就是说相对于body，这个网页最大的图层的距离。
比如下面的代码：
<div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div><div style="position:absolute; left:100px; top:100px; width:20px; height:20px; border:1px solid #000000;"></div>
首先第一个图层就是一开始就用来说明的图层，position:absolute不受任何div的布局的影响，自己游离于体系之外，
然后，第二个图层，没有上级div，所以position:absolute之后的left与top就是自己的左上角相对于浏览器左上角的距离
最后，第三个图层，处于第二个图层里面，其上级div就是第二个图层，存在上级div，所以position:absolute之后的left与top就是自己的左上角相对于第二个图层的左上角的距离。
另外，IE6是不支持position:fixed的，所以要实现那种悬停效果，不妨考虑利用position:absolute与javascript现实。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
