The first type of positioning isabsolute positioning. When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn'thave position: static. If there's no such element, the element withposition: absolute gets positioned relative to <html>.
To show you how this works, we've set the #outer div to have absolute positioning. This means that when you position the #inner div, it will be relative to #outer. (If #outer had the default positioning of static, then#inner would get positioned relative to the entire HTML document.)
Instructions
Try it out: set
#inner's position toabsolute and give it a margin-left of20px.
div {
height: 100px;
width: 100px;
border-radius: 5px;
border: 2px solid black;
}
#inner {
height: 75px;
width: 75px;
background-color: #547980;
margin-left:20px;
position:absolute;
}
#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