div中position相对定位与绝对定位实例

时间：2022-06-25 09:35:03 编辑：袖梨来源：一聚教程网

定位标签：position

包含的属性：relative（相对）与 absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
例如：

＃mybox{
position:relative;
left:20px;
top:20px;
}

效果就是使这个层向下和向左移动了20px。

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角的0点开始计算，
绝对定位使元素与文档流无关，因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布事HTML元素。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。）

那么有个问题产生了，现在大家做的网页大部分是居中的，那么我需要这个元素跟着网页

中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的，那么单纯的

absolute是不行的。

正确的解决方法就是在元素的父级元素定义为position:relative;（更正：这里可以是祖父

级，也可以是position:absolute;）需要绝对定位的元素设为position:absolute;

这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧！

下面看一些实例

代码如下

复制代码

A:均不设置postion，一般嵌套关系

B:仅外div设置relative，一般嵌套关系

C:仅内div设置absolute，文档中为嵌套关系，页面中内div浮起[非float]，相对于页面定位，与外div无关。

A:均不设置postion，一般嵌套关系

B:仅外div设置relative，一般嵌套关系

C:仅内div设置absolute，文档中为嵌套关系，页面中内div浮起[非float]，相对于页面定位，与外div无关。

D:外div设置relative，内div设置absolute，内div浮起来并相对于外div定位

D:外div设置relative，内div设置relative，内div浮起来并相对于外div定位

E:这个是说明边界问题。-10 != 反向10px间距

推荐专题

最新下载

热门教程

div中position相对定位与绝对定位实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程