Html 为什么我需要将div的边距设置为负值，而它的同级采用正值来将自己定位到顶部？_Html_Css

Html 为什么我需要将div的边距设置为负值，而它的同级采用正值来将自己定位到顶部？

html css

Html 为什么我需要将div的边距设置为负值，而它的同级采用正值来将自己定位到顶部？,html,css,Html,Css,我将div#hdesign的margin设置为margin:0px 250px以将其置于顶部。要将div#htestimional设置为顶部，它需要负值，如margin:-200px 300px；为什么两人都是同一父母的兄弟姐妹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

我将div#hdesign的margin设置为margin:0px 250px以将其置于顶部。要将div#htestimional设置为顶部，它需要负值，如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>


切片
html，正文{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
}
div#wrapper{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
线高：正常；
边框：#000细点；
背景色：#FF3；
字体大小：10px；
}
div#wrapper div#header{
宽度：100%；
身高：30%；
边框：#000细点；
}
div#wrapper div#body{
宽度：100%；
身高：50%；
边框：#000细点；
背景色：#096；
}
div#包装div#页脚{
宽度：100%；
身高：20.0%；
边框：#000细点；
}
div#wrapper div#header div#hlogo{
宽度：25%；
身高：95%；
边际：0px；
背景色：#096；
}
div#wrapper div#header div#hdesign{
宽度：180px；
高度：90px；
边框：#000细点；
位置：绝对位置；
顶部：0px；
左：115px；
利润率：0px250px；
背景色：#3C9；
不透明度：0.5；
线高：0px；
}
div#wrapper div#header div#htestimational{
//宽度：40%；
利润率：0px 300px；
宽度：150px；
身高：100%；
边框：#000细点；
}
div#wrapper div#header div#hlogo div#logo header{
字体大小：16px；
字体大小：粗体；
背景色：#F6F；
文本对齐：居中；
高度：30px；
宽度：70%；
保证金：0px 0px 0px 51px；
溢出：隐藏；
边框：#000细点；
}
div#wrapper div#header div#hlogo div#Logodesc{
字体大小：10px；
高度：30px；
背景色：#F90；
宽度：70%；
保证金：0px 0px 5px 51px；
溢出：隐藏；
线高：0.5；
文本对齐：居中；
边框：#000细点；
}
div#wrapper div#header div#hdesign div{
填充：60px 65px 0px 0px；
}
div#wrapper div#header div#hdesign div p{
颜色：#000；
字体大小：粗体；
}
div#wrapper div#header div#htestimational{
;
}
漫无边际的灵魂
一个免费的CSS模板
漫无边际的灵魂
出色的设计
保证
客户证明
ahkshdskka jkljsald
ahkshdskka jkljsald
ahkshdskka jkljsald
阿克什德斯卡

元素

#hdesign

与顶部对齐，因为

{位置：绝对；顶部：0；}

。它实际上不需要

页边距顶部：0

（以简写形式给出）

另一方面，元素

#htestimal

是静态定位的元素，因此在正常渲染流中也是如此。因此，在它之前呈现的任何内容（未定位的

fixed

或

absolute

）都会影响其定位

应进一步澄清定位上的差异

元素

#hdesign