关于相对定位


<html>
<head>
    <title></title>
    <style type="text/css">
        .d1 {position:relative;}
        .d2 {position:static;width:200px;height:200px;}
        .num {position:absolute;top:10px;left:10px;width:100px;height:20px;}
    </style>
</head>
<body>
    <div class="d1">
        <div class="num">1111111111111</div>
        <div class="num">2222222222222</div>
        <div class="num">3333333333333</div>
    </div>
    
    <div class="d2">xxxxxxxxxxxxxxxx</div>
</body>
</html>为了让num层能够相对定位，我设置d1的position:relative。
但是这样一来，d2居然跑到d1上面去了。
我想让d2在d1的下方，同时又不破坏d1内部的相对定位。
怎么办？

解决方案 »

  1.   


    <style type="text/css">
    .d1 {position:relative; width:200px;height:200px; border:1px solid red;}
    .d2 {position:static;width:200px;height:50px; border:1px solid green;}
    .num {width:180px; height:100px; margin-top:10px; margin-left:10px; margin-top:10px;height:50px; border:1px solid yellow;}
    </style>相对定位一般都是用margin-top 或者margin-left来定位的，调试css的时候把border:1px solid red;这样的加上比较好调试，我在ff下做的