Daily Video Blog with Anik || Exercise on CSS Position
In this video,I explained an Exercise on CSS Position. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. The code is as follows -
HTML File -
<html>
<head> <title> CSS Position </title>
<link rel="stylesheet" href="exercises9.css">
</head>
<body>
<div id="d1">
<h1> This is my first DIV </h1>
</div>
<div id="d2">
<h1> This is my second DIV </h1>
</div>
<div id="d3">
<h1> This is my third DIV </h1>
</div>
<br> <br> <br>
<div id="d4">
<h1> This is my fourth DIV </h1>
</div>
<div id="d5">
<h1> This is my fifth DIV </h1>
</div>
</body>
</html>
CSS File -
div {
border: 1px solid blue;
}
#d1 {
position: static;
height:150px;
width:350px;
}
#d2 {
position: relative;
height:150px;
width:350px;
}
#d3 {
position: fixed;
height:150px;
width:350px;
}
#d4 {
position: absolute;
height:150px;
width:350px;
float: right;
color: red;
}
#d5 {
position: sticky;
height:150px;
width:350px;
float: right;
}
HTML File -
<html>
<head> <title> CSS Position </title>
<link rel="stylesheet" href="exercises9.css">
</head>
<body>
<div id="d1">
<h1> This is my first DIV </h1>
</div>
<div id="d2">
<h1> This is my second DIV </h1>
</div>
<div id="d3">
<h1> This is my third DIV </h1>
</div>
<br> <br> <br>
<div id="d4">
<h1> This is my fourth DIV </h1>
</div>
<div id="d5">
<h1> This is my fifth DIV </h1>
</div>
</body>
</html>
CSS File -
div {
border: 1px solid blue;
}
#d1 {
position: static;
height:150px;
width:350px;
}
#d2 {
position: relative;
height:150px;
width:350px;
}
#d3 {
position: fixed;
height:150px;
width:350px;
}
#d4 {
position: absolute;
height:150px;
width:350px;
float: right;
color: red;
}
#d5 {
position: sticky;
height:150px;
width:350px;
float: right;
}
Comments
Post a Comment