Why I need to set the margin of a div to a negative value when its siblings take positive value to position themselves to the top?
I set the margin of div#hdesign to margin:0px 250px to put it to the top..To set div#hTestimonial to the Top, it takes negative values like margin:-200px 300px; Why is this the case when both are sibllings of the same parent?
<!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>
Element #hdesign gets aligned to the top because of {position: absolute; top: 0;}. It doesn't really need the margin-top: 0 (given in shorthand).
Element #hTestimonial on the other hand is a statically positioned element, and so in the normal rendering flow. Thus any content rendered before it (that's not positioned fixed or absolute) affects its positioning.
This tutorial should further clarify the differences in positioning.
加载中,请稍侯......
精彩评论