Perfect! See? This positioning stuff's not so hard.
Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.
Instructions
Set
#inner's position to fixed, then scroll up and down a bit. It stays put even as #outer moves out of the frame!
div {
height: 100px;
width: 100px;
border-radius: 5px;
border: 2px solid black;
}
#inner {
height: 75px;
width: 75px;
background-color: #547980;
margin-left:200px;
position:fixed;
}
#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