CSS හි ස්ථාවර ස්ථානගත කිරීම

දැන් අපි ස්ථාවර ස්ථානගත කිරීම සමඟ කටයුතු කරන්නෙමු. එය නිරපේක්ෂ එකට සමාන ය, වෙනස පෙන්නුම් කරන්නේ මෙම ස්ථානගත කිරීමේ වර්ග ගමන් කරන ආකාරය තුළය ස්ක්රෝල් තීරුවක් තිබීම.

පිටුව ස්ක්රෝල් කරන විට නිරපේක්ෂව ස්ථානගත කරන ලද අංග පිටුව සමඟ ස්ක්රෝල් වේ. උදාහරණය බලන්න:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}

ස්ක්රෝල් කරන විට එය කිරීමට හැකිය පිටුව ස්ථානගත කරන ලද මූලද්රව්යය රැඳී සිටියේය ස්ථානයේ. මේ සඳහා ඔබට එය ස්ථාවර කිරීමට අවශ්යය position ගුණය භාවිතයෙන් ස්ථානගත කිරීම මිල fixed ලෙස:

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: fixed; /* ස්ථාවර ස්ථානගත කිරීම සකසන්න */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}