Program:
<!DOCTYPE html>
<html>
<head>
<title>Simple positions web</title>
<style>
*{padding: 0px;margin: 0px;}
.div1{background-color: blue; width: 500px; height: 400px; position: relative;}
.div2{background-color: yellow; width: 200px; height: 150px; position: absolute;left: 0;}
.div3{background-color: green; width: 200px; height: 150px; position: absolute; right: 0;}
.div4{background-color: red; width: 200px; height: 150px; position: absolute; bottom: 0;}
.div5{background-color: gray; width: 200px; height: 150px; position: absolute;bottom: 0;right: 0;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">Hello</div>
<div class="div3">Welcome</div>
<div class="div4">CSS</div>
<div class="div5">World</div>
</div>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
<title>Simple positions web</title>
<style>
*{padding: 0px;margin: 0px;}
.div1{background-color: blue; width: 500px; height: 400px; position: relative;}
.div2{background-color: yellow; width: 200px; height: 150px; position: absolute;left: 0;}
.div3{background-color: green; width: 200px; height: 150px; position: absolute; right: 0;}
.div4{background-color: red; width: 200px; height: 150px; position: absolute; bottom: 0;}
.div5{background-color: gray; width: 200px; height: 150px; position: absolute;bottom: 0;right: 0;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">Hello</div>
<div class="div3">Welcome</div>
<div class="div4">CSS</div>
<div class="div5">World</div>
</div>
</body>
</html>
Output:
No comments:
Post a Comment