Great work so far! Now that you understand positioning elements withfloat, let's move on to slightly more complex positioning methods.
If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.
Instructions
Check out the
<div>s in the editor. They currently have static positioning, but we're about to change all that. Hit Save & Submit Code to begin!
div {
height: 100px;
width: 100px;
border-radius: 5px;
border: 2px solid black;
}
#inner {
height: 75px;
width: 75px;
background-color: #547980;
/*Add your CSS here!*/
}
#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