当前位置：首页 → 问答吧 → 简单的position:relative;

简单的position:relative;

时间：2011-10-10

来源：互联网

下面的body选择器要是不设置positon:relative的话，浏览器显示的是4个方块
若body选择器设置了positon:relative，浏览器怎么只显示2个方块了呢，求被指点呀
HTML code

<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
 position:absolute;
 top: 50px;
 left: 50px;
 background:#ff00ff;
height:200px;
    width:200px;
}

#box2 {
 position:absolute;
 top: 50px;
 right: 50px;
 background:#ff00ff;
height:200px;
    width:200px;
}

#box3 {
 position:absolute;
 bottom: 55px;
 right: 55px;
background:#ff00ff;
height:200px;
    width:200px;
}

#box4 {
 position:absolute;
 bottom: 55px;
 left: 55px;
background:#ff00ff;
height:200px;
    width:200px;
}
    body{
        position:relative;
    }
</style>
</head>
    <body>
        <div id="box1">
        </div>
        <div id="box2">
        </div>
        <div id="box3">
        </div>
        <div id="box4">
        </div>
    </body>
</html>

作者: Xiaos_hui 发布时间: 2011-10-10

你给body设个高
这问题就解决了
你没高
它自动默认你的bottom在最顶上
还有个
你bottom:-?px;这也可以解决
新手
随便发表自己的看法
有不对的地方忘帮忙改正

作者: haiting0120 发布时间: 2011-10-10

首先你得充分理解css里position的两个值：relative和absolute的含义；
你给四个div的position的值都是absolute（绝对定位）
浏览器会首先判断div的父级（body）是否设置了position属性的值
如果没有设置，则div的定位就是按照浏览器窗口为参照对象定位
若body设置了position值，则div将以body为参照对象定位

作者: lein_design 发布时间: 2011-10-10

楼上正解

作者: a87345293 发布时间: 2011-10-10

简单的position:relative;

热门阅读

热门下载