Demo CSS Position

ABSOLUTE


FIXED


RELATIVE

Lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum



Posisi Elemen yang Sesungguhnya

<h3 class="posisi" style="position:absolute;top:15px;left:30px;">ABSOLUTE</h3>
<h3 class="posisi" style="position:fixed;top:15px;right:30px;">FIXED</h3>
<h3 class="posisi" style="position:relative;top:50px;left:30px;">RELATIVE</h3>

Lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum dolor silit pitik lorem ipsum

<style type="text/css">
h3.posisi{
font:bold 20px Calibri,Arial,Sans-Serif;
color:#fff;
background:#0080C0;
padding:10px 15px;
width:100px;
text-align:center;
}
</style>

Edit

×