作业帮关于div定位的问题:position:relative;和position:absolute;实现的效果容器1容器2容器3容器4容器3距离页面顶端10px容器4距离容器3低端10px容器1距离容器4低端10px容器2距离容器1低端10px也就是说显示的位
来源：学生作业帮助网 编辑：作业帮 时间：2024/11/15 21:47:37
关于div定位的问题:position:relative;和position:absolute;实现的效果容器1容器2容器3容器4容器3距离页面顶端10px容器4距离容器3低端10px容器1距离容器4低端10px容器2距离容器1低端10px也就是说显示的位
关于div定位的问题:position:relative;和position:absolute;
实现的效果
容器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;去写?
不能出现:
的现象.
上面所提到的显示位置出错了,应该是:
容器3离页面顶端最近,其次是容器4,再次是容器1,最后是容器2.
第一条回复全部用相对路径,写的也很详细,假如不控制width的话应该是全屏显示,这样的话左边可能有10px的距离,而右边可能贴边,
第三条回复请帮忙把代码写详细一些,我看看效果如何,以前没有用过相对和绝对在一起的效果.
关于div定位的问题:position:relative;和position:absolute;实现的效果容器1容器2容器3容器4容器3距离页面顶端10px容器4距离容器3低端10px容器1距离容器4低端10px容器2距离容器1低端10px也就是说显示的位
你可以分别用绝对定位和相对定位来控制4个容器之间的位置关系,容器3离页面顶端10个像素,可以用(position:absolute;top：10px;）,而其次是容器4距离容器3底部10个像素,可以用（position:relative;top：10px;）,而下面的直接以此类推.不知道你还能明白我的意思哈~
代码如下：
无标题文档
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;}