<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Positioning</title>
<style>
body{
/* It is example for position: fixed; */
height: 4000px;
}
.box{
width: 100px;
height: 100px;
}
.container{
background: #333;
width:500px;
height: 500px;
position: relative;
/* z-index :3; */
}
#box-0{
/* position property default value is 'static' */
/* position values
-static
-relative
-absolute
-fixed
-sticky
*/
/* 1 */
position: static;
background:royalblue;
}
#box-1{
/* 2. */
position: relative;
top: 50px;
left: 50px;
background: red;
/* Behind the container */
z-index: 1;
}
#box-2{
top: 100px;
left: 100px;
/* 3. */
position: absolute;
background: chocolate;
}
#box-3{
background: steelblue;
position:absolute;
bottom:100px;
right: 100px;
}
#box-4{
position: relative;
background: greenyellow;
z-index: 2;
}
#box-5{
background: rosybrown;
}
#box-6{
/* 4. */
position: fixed;
background: skyblue;
}
#box-7{
/* 5. */
position: sticky;
background: blueviolet;
z-index:-1;
}
#box-8{
display: flex;
align-items: center;
justify-content: center;
background: turquoise;
position: sticky;
top:0;
left: 500px;
}
</style>
</head>
<body>
<div id="box-0" class="box"></div>
<div id="box-1" class="box"></div>
<div class="container">
<div id="box-2" class="box"></div>
<div id="box-3" class="box"></div>
<div id="box-4" class="box"></div>
<div id="box-5" class="box"></div>
</div>
<div id="box-6" class="box"></div>
<div id="box-7" class="box"></div>
<div id="box-8" class="box"></div>
</body>
</html>
No comments:
Post a Comment