left ගුණය
left ගුණය මූලද්රව්යයේ වම් දාරයේ ස්ථානය නිර්වචනය කරයි.
ගුණය සඳහා අගයන් පොදුවේ පිළිගත් ප්රමාණ ඒකක සමඟ ලිවිය හැකිය,
උදාහරණයක් ලෙස, පික්සල්, අඟල්, පොයින්ට්, සියයට වලින්.
නිර්වචනය කරන අගයන් ඍණ අංක විය හැකිය,
මෙම අවස්ථාවේ දී මූලද්රව්ය එකිනෙක මත අතිච්ඡාදනය වේ.
ඛණ්ඩාංක ගණනය කිරීම position ගුණය අනුව තීරණය වේ,
එය සාමාන්යයෙන් relative
(සාපේක්ෂ ස්ථානය) හෝ absolute
(නිරපේක්ෂ ස්ථානය) අගය ලබා ගනී.
වාක්ය රචනා ක්රමය
තේරීමක් {
left: ප්රමාණය හෝ auto;
}
උදාහරණය
දැන් අපි උප මූලද්රව්යය මත ගිලිහෙන විට
එහි වම් දාරයේ ස්ථානය
25px ට සමාන කරමු:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
left: 25px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
උදාහරණය
දැන් උප මූලද්රව්යය මත ගිලිහෙන විට එහි වම් දාරය
-50px වෙත පිහිටා ඇති ආකාරයට සකසමු:
<div id="elem">
<p></p>
</div>
#elem {
width: 400px;
height: 300px;
border: 1px solid black;
}
p {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
left: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
මෙයද බලන්න
-
bottomගුණය,
එය මූලද්රව්යයේ පහළ දාරයේ ස්ථානය නිර්වචනය කරයි -
topගුණය,
එය මූලද්රව්යයේ ඉහළ දාරයේ ස්ථානය නිර්වචනය කරයි -
rightගුණය,
එය මූලද්රව්යයේ දකුණු දාරයේ ස්ථානය නිර්වචනය කරයි -
සුවිශේෂී මූලද්රව්යය
::backdrop,
එය පළමු මූලද්රව්යයට පසුව පිහිටීම නිර්වචනය කරයි
