Good! Did you notice how the #innerdiv moved 20 pixels in from the edge of the #outer div? That's absolute positioning at work.
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default staticpositioning.
If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where itotherwise would have been.
Instructions
Give it a try: change
#inner's positionto relative and give it a margin-leftof 200px.
div {
height: 100px;
width: 100px;
border-radius: 5px;
border: 2px solid black;
}
#inner {
height: 75px;
width: 75px;
background-color: #547980;
margin-left:200px;
position:relative;
}
#outer {
height: 1500px;
width: 150px;
background-color: #45ADA8;
position: absolute;
margin-left: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
</html>
No comments:
Post a Comment