为什么当div的兄弟姐妹取正值以使其位于顶部时，我需要将div的边距设置为负值？

问题描述

| 我将div＃hdesign的边距设置为margin：0px 250px放在顶部。要将div＃hTestimonial设置为Top，它需要使用负值，例如margin：-200px 300px; 当两者都是同一个父母时，为什么会这样？

<!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>Slicing</title>

<style type=\"text/css\">
html,body{  
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;

    }
div#wrapper{    
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        line-height:normal;
        border:#000 thin dotted;
        background-color:#FF3;
        font-size:10px;

    }

div#wrapper div#header{
        width:100%;
        height:30%;
        border:#000 thin dotted;

    }


div#wrapper div#body{
        width:100%;
        height:50%;
        border:#000 thin dotted;
        background-color:#096;
    }

div#wrapper div#footer{
        width:100%;
        height:20.0%;
        border:#000 thin dotted;

    }



div#wrapper div#header div#hlogo{
        width:25%;
        height:95%;

        margin:0px ;

        background-color:#096;


    }

div#wrapper div#header div#hdesign{
        width:180px;
        height:90px;
        border:#000 thin dotted;
        position:absolute;
        top:0px;
        left:115px;
        margin:0px 250px;
        background-color:#3C9;
        opacity:0.5;
        line-height:0px;
    }

div#wrapper div#header div#hTestimonial{
        //width:40%;
        margin:0px 300px;
        width:150px;
        height:100%;
        border:#000 thin dotted;


    }

div#wrapper div#header div#hlogo div#logoheader{
        font-size:16px;
        font-weight:bold;
        background-color:#F6F;
        text-align:center;
        height:30px;
        width:70%;
        margin:0px 0px 0px 51px;
        overflow:hidden;
        border:#000 thin dotted;



    }

div#wrapper div#header div#hlogo div#logodesc{
        font-size:10px;
        height:30px;
        background-color:#F90;
        width:70%;
        margin:0px 0px 5px 51px;
        overflow:hidden;
        line-height:0.5;
        text-align:center;
        border:#000 thin dotted;
    }


div#wrapper div#header div#hdesign div{


        padding:60px 65px 0px 0px;

    }

div#wrapper div#header div#hdesign div p{
        color:#000;
        font-weight:bold;
    }

div#wrapper div#header div#hTestimonial{
        ;
    }
</style>
</head>

<body>
<div id=\"wrapper\">
    <div id=\"header\">
        <div id=\"hlogo\">


                    <div id=\"logoheader\">RamblingSoul</div>
                    <div id=\"logodesc\">
                        <p>A Free CSS Template From</p>
                        <p>RamblingSoul</p>
                    </div>


        </div>
        <div id=\"hdesign\">
                <div><p>Great Design </p><p>Guaranteed</p></div>

        </div>
        <div id=\"hTestimonial\">
                <div > <h3>Client Testimonial</h3>
                        <p>ahkshdskka jkljsald</p>
                        <p>ahkshdskka jkljsald</p>
                        <p>ahkshdskka jkljsald</p>
                        <p>ahkshdskka<a href=\"\"> Read More</a></p>
                </div>
        </div>
    </div>
    <div id=\"body\">
    </div>
    <div id=\"footer\">
    </div>
</div>
</body>
</html>

解决方法

由于{position: absolute; top: 0;}，元素#hdesign对齐到顶部。它实际上并不需要margin-top: 0（简写形式）。另一方面，元素#hTestimonial是静态定位的元素，因此在正常渲染流程中也是如此。因此，在其之前呈现的所有内容（未定位为“5ѭ”或“6ѭ”）都会影响其定位。本教程应进一步阐明位置上的差异。

div 位于使其我需要将设置设置设置边距边距顶部顶部