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