我想通过一个例子讲解一下div+css中的定位问题，谁能给个例子，谢了

发布网友发布时间：2022-04-06 12:22

我来回答

共2个回答

热心网友时间：2022-04-06 13:52

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {

position: relative;

left: 30px;

top: 20px;

}

如下图所示：

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

那么我们就会想了怎么让框三把框二覆盖呢，很自然的想到把框3的z-index设为一个优先级高的值如100，但是这样并不能得到我们想要的结果，必须把框2的z-index设为优先级低的如-1，

我猜想是因为框2已经脱离了文档流，所以只设置框3的z-index对框2起不到作用，所以只能对框2操作了。大家也可以去试试代码如下在ie7下通过：

<html>

<title>Untitled Page</title>

span

{

background-color: Red;

width: 30px;

height: 30px;

}

#box_relative

{

position: relative;

left: 10px;

top: 10px; background-color: gray;z-index:-1;

}

</style>

</head>

<body>

</body>

</html>

CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {

position: absolute;

left: 30px;

top: 20px;

}

如下图所示：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

同样的道路如果想让框1，3在2之上的话也需要在框2上设置z-index，而且如果只在框1，3上设置的话无效。大家也可以去试试代码如下在ie7下通过：

<html>

<title>Untitled Page</title>

span

{

background-color: Red;

width: 30px;

height: 30px;

}

#box_relative

{

position: absolute;

left: 20px;

top: 20px; background-color: gray;

}

</style>

</head>

<body>

<span style="z-index:30"></span><span

id="box_relative"></span><span

style="z-index:30"></span>

</body>

</html>

参考资料：http://www.jb51.net/css/21615.html,http://blog.csdn.net/cui_angel/article/details/7863749

热心网友时间：2022-04-06 15:10

1. 默认位置

<div id="div1">我是上面的层</div>

<div id="div2">我是下面的层</div>

2. 左右位置布局

<div id = "innerRight" style="float:right; width=50%; height=120px">这是右边的层</div>

<div id = "innerleft" style="height=120px;">这是左边的层</div>

</div>

3. 相对位置和绝对位置

你可以参照http://www.okhan.net/article/sort0465/sort0467/info-3169.html上面的例子介绍，以及http://developer.51cto.com/art/201009/225424.htm理论介绍，比较清晰，不再赘述。

有其他问题请追问我。

参考资料：原版