Fixed position di CSS akan membuat suatu elemen tetap pada tempatnya meskipun kita melakukan scroll. Fixed position bisa dipakai untuk menu dalam aplikasi atau link ke social media yang akan selalu tetap pada tempatnya.
Sebagai contoh dapat dilihat pada coding berikut iniL
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Position Fixed</title>
<style type=”text/css”>
#menuku
{
position: fixed;
top: 5px;
left: 10px;
background: #3c3c3c;
color: white;
padding: 5px;
}
#menuku a:link, #menuku a:visited
{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id=”menuku”><a href=”#lagu1″>Close to Thee</a> | <a href=”#lagu2″>Be Thou my vision</a> | <a href=”#lagu3″>All the way my Savior leads me</a></div>
<div id=”isi”>
<a name=”lagu1″></a>
<br/> 
<br/> 
<br/> 
<strong>Close to Thee</strong>
<pre>Thou my everlasting Portion, more than friend or life to me,
All along my pilgrim journey, Savior, let me walk with Thee.
Close to Thee, close to Thee, close to Thee, close to Thee,
All along my pilgrim journey, Savior, let me walk with Thee.
Not for ease or worldly pleasure, nor for fame my prayer shall be;
Gladly will I toil and suffer, only let me walk with Thee.
Close to Thee, close to Thee, close to Thee, close to Thee,
Gladly will I toil and suffer, only let me walk with Thee.
Lead me through the vale of shadows, bear me over life’s fitful sea;
Then the gate of life eternal may I enter, Lord, with Thee.
Close to Thee, close to Thee, close to Thee, close to Thee,
Then the gate of life eternal may I enter, Lord, with Thee.</pre>
<a name=”lagu2″></a>
<br/> 
<br/> 
<br/> 
<strong>Be Thou my Vision</strong>
<pre>Be Thou my Vision, O Lord of my heart;
Naught be all else to me, save that Thou art.
Thou my best Thought, by day or by night,
Waking or sleeping, Thy presence my light.
Be Thou my Wisdom, and Thou my true Word;
I ever with Thee and Thou with me, Lord;
Thou my great Father, I Thy true son;
Thou in me dwelling, and I with Thee one.
Be Thou my battle Shield, Sword for the fight;
Be Thou my Dignity, Thou my Delight;
Thou my soul’s Shelter, Thou my high Tower:
Raise Thou me heavenward, O Power of my power.
Riches I heed not, nor man’s empty praise,
Thou mine Inheritance, now and always:
Thou and Thou only, first in my heart,
High King of Heaven, my Treasure Thou art.
High King of Heaven, my victory won,
May I reach Heaven’s joys, O bright Heaven’s Sun!
Heart of my own heart, whatever befall,
Still be my Vision, O Ruler of all.</pre>
<a name=”lagu3″></a>
<br/> 
<br/> 
<br/> 
<strong>All the way my Savior leads me</strong>
<pre>All the way my Savior leads me;
What have I to ask beside?
Can I doubt His tender mercy,
Who through life has been my Guide?
Heav`nly peace, divinest comfort,
Here by faith in Him to dwell!
For I know, whate`er befall me,
Jesus doeth all things well;
For I know, whate`er befall me,
Jesus doeth all things well.
All the way my Savior leads me,
Cheers each winding path I tread;
Gives me grace for every trial,
Feeds me with the living Bread.
Though my weary steps may falter,
And my soul athirst may be,
Gushing from the Rock before me,
Lo! A spring of joy I see;
Gushing from the Rock before me,
Lo! A spring of joy I see.
All the way my Savior leads me
O the fullness of His love!
Perfect rest to me is promised
In my Father`s house above.
When my spirit, clothed immortal,
Wings its flight to realms of day
This my song through endless ages
Jesus led me all the way;
This my song through endless ages
Jesus led me all the way.</pre>
</div>
</body>
</html>
Hasil dari coding ini dapat dilihat di http://aris.proweb.asia/position_fixed.html seperti pada gambar di bawah ini:
Pada tampilan tersebut menu yang menunjukkan link lagu akan tetap di atas meskipun kita melakukan scrolling.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
