top ගුණය
top ගුණය මූලද්රව්යයක ඉහළ දාරයේ ස්ථානය
එහි මව් මූලද්රව්යයේ ඉහළ දාරයෙන් මනිනු ලැබේ.
ගුණය සඳහා අගයන්
පික්සල්, අඟල්, ලකුණු, සියයට වැනි පොදු ප්රමාණ ඒකක වලින්
ලිවිය හැකිය.
සැකසිය හැකි අගයන් සෘණ අංක ද විය හැකිය,
මෙම අවස්ථාවේ දී මූලද්රව්ය එකිනෙක මත අතුල්ලනු ඇත.
සම්බන්ධීකරණ ගණනය කිරීම position ගුණය මගින් තීරණය කරනු ලබන අතර,
එය සාමාන්යයෙන් relative
(සාපේක්ෂ ස්ථානය) හෝ absolute
(නිරපේක්ෂ ස්ථානය) අගය ලබා ගනී.
වාක්ය රචනා ක්රමය
තෝරන්නා {
top: ප්රමාණය හෝ 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-top: 50px;
margin-left: 50px;
}
p:hover {
top: 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;
margin-top: 50px;
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 50px;
}
p:hover {
top: -50px;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
මෙයද බලන්න
-
bottomගුණය,
මූලද්රව්යයක පහළ දාරයේ ස්ථානය සකස් කරයි -
leftගුණය,
මූලද්රව්යයක වම් දාරයේ ස්ථානය සකස් කරයි -
rightගුණය,
මූලද්රව්යයක දකුණු දාරයේ ස්ථානය සකස් කරයි -
::backdropඅර්ධ මූලද්රව්යය,
පළමු මූලද්රව්යයට පසුව ස්ථානය සකස් කරයි -
caption-sideගුණය,
වගුවක ශීර්ෂකයේ ස්ථානය සකස් කරයි
