HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo HTML</title>
  <style>
    body {text-align: center;font-family: 'Tahoma',sans-serif}
    *{box-sizing: border-box}
.demo-kontainer {
    position: relative;
    width: 100%;
    padding: 20px;
    margin: 10px auto;
    border: 2px solid #ddd;
    border-bottom-width: 4px;
    border-bottom-color: blue;
    background: lightblue;
}
.demo-kontainer > .demo-konten{
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px 2px;
    padding: 5px;
}.demo-konten div {
    border: 2px solid #ccc;
    color: #fff;
    padding: 5px;
    width: 100px;
    height: 100px;
}
.fixed {
    position: fixed;
    background: yellow;
    color: #333!important;
    top: 50%;
    left: 0;
}
  </style>
</head>
<body>
  <h2 align="center">Elemen fixed - DEMO</h2>
  <p></p>
  <div class="demo-kontainer">
  <div class="demo-konten">
    <div class="fixed"><b><a href="#fixed">elemen fixed</a></b>
  </div>
</div>
  <p class="blue">Posisi <b>fixed</b> : tata letak posisi ini berdasarkan lebar layar perangkat. Sehingga tata letaknya akan keluar dari bingkai asal (elemen induk) nya apabila lebarnya lebih kecil dari lebar layar perangkat atau viewport</p>
</div>
</body>
</html>

Coding Blogger Posisi dalam CSS - CSS position

HTML Demo

Demo elemen fixed