Try It Yourself: CSS Position

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Position</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Position</h1>

<h2>CSS Position - Sticky</h2>

<ul class="demo">
  <li><a href="#">List Item 1</a></li>
  <li><a href="#">List Item 2</a></li>
  <li><a href="#">List Item 3</a></li>
  <li><a href="#">List Item 4</a></li>
  <li><a href="#">List Item 5</a></li>
</ul>

<h2>CSS Position - Relative and Absolute</h2>

<div class="relativeDiv">
  <img src="web-design.jpg" width="100%">
  <p>Learn Web Design and Development with Webtrickshome</p>
</div>

<h2>CSS Position - Fixed</h2>
<img src="logo-icon.png" class="img-fixed">



<style>
.demo{
  background: #333;
  padding: 10px;
  list-style-type: none;
  position: sticky;
  top: 0;
  display: flex; /* aligns child element by allocating each item equal width*/
  z-index: 3;
}
.demo li{
  width: 100%;
  text-align: center;
}
.demo li a{
  color: #fff;
  text-decoration: none;
}
.relativeDiv{
  position: relative;
  z-index: 2;
}
.relativeDiv p{
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 5px 15px;
  z-index: 1;
}
.img-fixed{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 4;
}
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Position - Playground