关于div定位的问题:position:relative;和position:absolute;
实现的效果<divclass="style1">容器1</div><divclass="style2">容器2</div><divclass="style3">容器3</...
实现的效果
<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的距离,而右边可能贴边,
第三条回复请帮忙把代码写详细一些,我看看效果如何,以前没有用过相对和绝对在一起的效果. 展开
<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的距离,而右边可能贴边,
第三条回复请帮忙把代码写详细一些,我看看效果如何,以前没有用过相对和绝对在一起的效果. 展开
2个回答
展开全部
你可以分别用绝对定位和相对定位来控制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>
代码如下：
<!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>
本回答被提问者采纳
已赞过
已踩过<
你对这个回答的评价是？
展开全部
这个写法就有很多个啊！
一个简单一点的写法：
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;
}
一个简单一点的写法：
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;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
