关于div定位的问题:position:relative;和position:absolute;

实现的效果
<div class="style1">容器1</div>
<div class="style2">容器2</div>
<div class="style3">容器3</div>
<div class="style4">容器4</div>
容器3距离页面顶端10px
容器4距离容器3低端10px
容器1距离容器4低端10px
容器2距离容器1低端10px
也就是说显示的位置,容器3离页面顶端最近,其次是容器4，再次是容器3，最后是容器4.
body {
padding: 0px; font-weight: normal; font-size: 100%; margin: 10px; font-style: normal; font-family: 宋体,Tahoma,Helvetica,Arial,serif
}
请问一下,容器1至容器4该如何利用position:relative;或position:absolute;去写?
不能出现:
<div>
<div class="style1">容器1</div>
<div class="style2">容器2</div>
<div class="style3">容器3</div>
<div class="style4">容器4</div>
</div>
的现象.
上面所提到的显示位置出错了,应该是:

容器3离页面顶端最近,其次是容器4，再次是容器1，最后是容器2.

第一条回复全部用相对路径,写的也很详细,假如不控制width的话应该是全屏显示,这样的话左边可能有10px的距离,而右边可能贴边,
第三条回复请帮忙把代码写详细一些,我看看效果如何,以前没有用过相对和绝对在一起的效果.

举报该问题

其他回答

第1个回答推荐于2016-11-03

你可以分别用绝对定位和相对定位来控制4个容器之间的位置关系，容器3离页面顶端10个像素，可以用(position:absolute;top：10px;），而其次是容器4距离容器3底部10个像素，可以用（position:relative;top：10px;），而下面的直接以此类推。不知道你还能明白我的意思哈~
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
body{ margin:0px; padding:0px;}
.style3{ width:400px; height:100px; border:1px solid #333; position:absolute; top:10px;}
.style4{ width:400px; height:100px; border:1px solid #333; position:absolute; top:120px;}
.style1{ width:200px; height:100px; border:1px solid #333; position:absolute; top:230px;}
.style2{ width:200px; height:100px; border:1px solid #333; position:absolute; top:340px;}
</style>
<body>
<div class="style1">容器1</div>
<div class="style2">容器2</div>
<div class="style3">容器3</div>
<div class="style4">容器4</div>
</body>
</html>本回答被提问者采纳

第2个回答 2010-09-14

这个写法就有很多个啊！

一个简单一点的写法：

body {
padding: 0px; font-weight: normal; font-size: 100%; margin: 10px; font-style: normal; font-family: 宋体,Tahoma,Helvetica,Arial,serif
}
.style1,.style2,.style3,.style4{
position:absolute;
width:100px;
height:20px;
overflow:hidden;
background:#39F;
}
.style4{
top:40px;
}
.style1{
top:70px;
}
.style2{
top:100px;
}

相似回答

DIV怎么定位两个div?答：用绝对定位，把两个都放在一个大的DIV里面，大的设置成position:relaitve。第一个小DIV属性设置成为position:absolute; z-index:1。第二个小DIV属性设置成为position:absolute; z-index:2。width、height、left和top视情况而定。注：1、父级div用相对定位position:relative,子级div用绝对定位position:ab...

如何使用DIV标签的定位(如何绝对定位和相对定位)答：1.position:relative;如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。(再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框)2.position:absolute;表示绝对定位，位置将依据...

什么是DIV的相对布局和绝对布局答：position:relative;top:20px;left:40px;} 如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。可见，position:relative;并不是很好用。position:absolute|绝对定位使用position:absolute;,能够很准确的将元素移动到你想要的位置，让我将 div-1a 移动到页面...

HTML中DIV的相对定位与绝对定位答：绝对定位（absolute）：当一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零，那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。相对定位（relative）:当设了相对的偏移量之后...

什么是DIV的相对布局和绝对布局答：属性只能在相对布局中使用，在绝对布局中不会显示）。绝对布局也叫坐标布局，直接就可以决定子组件的绝对位置，简单直接就可以定位，但是由于设备的屏幕不一样大，适配性差，可以直接用position:absolute|绝对定位，来定义组件的位置（属性只能在绝对布局中使用，在相对布局中不会显示）。

CSS+DIV相对定位和绝对定位的区别和联系答：position:relative; left:20px; top:10px">这是从当前位置（默认位置）往左移20像素，往下移10像素</div> <div style="position:absolute; left:20px; top:10px">这是移到离自己最近的具有定位属性（相对或绝对）的上级元素（如果没有则是当前窗口）的左边20像素上边10像素的位置。</div> ...