Positions
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="positions.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position</title>
</head>
<body>
<section>
<h2>Static Demo</h2>
<div id="static"></div>
<div></div>
</section>
<section>
<h2>Relative Demo</h2>
<div id="relative"></div>
<div></div>
</section>
<section>
<h2>Absolute Demo</h2>
<div></div>
<div id="absolute"></div>
</section>
<section>
<h2>Fixed Demo</h2>
<div id="fixed"></div>
<div></div>
</section>
</body>
</html>
CSS
div {
height: 100px;
width: 100px;
border: 2px solid black;
background-color: aqua;
display: inline-block;
margin: 10px;
}
#static {
top: 100px;
left: 100px;
position: static;
background-color: lightgoldenrodyellow;
}
#relative {
top: 200px;
left: 200px;
position: relative;
background-color: lightcoral;
}
#absolute {
background-color: lightgreen;
top: 180px;
left: 100px;
position: absolute;
}
#fixed{
position:fixed;
top:500px;
left:123px;
background-color: brown;
}
Comments
Post a Comment