🧲 CSS Display සහ Position – Layout එකේ Superpower! 🔥 (4 වන පාඩම)

ඔයාට web එකක් හදනකොට හොඳ layout එකක් ඕනෙ නේද? 😎

HTML එකේ element එකක් page එකේ කොහෙද තියෙන්නෙ කියලා Display සහ Position decide කරනවා.

එහෙනම් එයා හොඳට ගියාම, web එකක් professional එකට හැදෙයි 💪

🪟 Display Property – Element එක behave වෙන විදිහ

CSS display කියන්නේ element එක block එකක්ද? inline එකක්ද? කියලා කියන එක.

📦 1. block

display: block;

• හැම විටම නව line එකක start වෙනවා.
• මුළු width එකම ගන්නවා.
• උදාහරණ: <div>, <p>, <h1>...

📝 2. inline

display: inline;

• එකම line එකේ appear වෙනවා.
• Width/height control කරන්න බැහැ.
• උදාහරණ: <span>, <a>...

🎛️ 3. inline-block

display: inline-block;

• Line එකේම තියෙන්න පුළුවන්.
• Width/height දැමිය හැක.

📐 4. none

display: none;

• Element එක UI එකෙන් හොරෙන් යනවා 😶‍🌫️
• DOM එකේ තියෙනවා, but UI එකේ නෑ.

📍 Position Property – Element එක පිහිටුවන විදිහ

position කියන එකෙන් CSS එකට කියනවා "මෙම element එක web එකේ කොහෙද තියෙන්න ඕනේද?" කියලා.

🔹 1. static (default)

position: static;

• Page එකේ normal flow එකට අනුව තැබෙනවා.

🧷 2. relative

position: relative;
top: 10px;
left: 20px;

• Original ස්ථානයෙන් adjust වෙනවා.

📌 3. absolute

position: absolute;
top: 0;
left: 0;

• Nearest relative/absolute/fixed parent එකට position වෙනවා.
• Normal flow එකෙන් අයින් වෙනවා.

🧊 4. fixed

position: fixed;
bottom: 0;
right: 0;

• Viewport එකට fixed වෙනවා.
• Scroll උනත් එයාලා තාම තියෙනවා – e.g. sticky navbars 🚀

🧷 5. sticky

position: sticky;
top: 0;

• Scroll කරනකොට top එකට sticky වෙනවා.
• Mixture of relative + fixed.

🧪 Practice Idea:

<div class="box1">Static Box</div>
<div class="box2">Relative Box</div>
<div class="box3">Absolute Box</div>
.box1 {
  position: static;
}
.box2 {
  position: relative;
  top: 20px;
  left: 10px;
}
.box3 {
  position: absolute;
  top: 0;
  right: 0;
}

👉 Try karala balanna dev tools වලට ගිහින් 🔍

Display සහ Position දෙකම තමයි ඔයාගේ layout එක "මිනිස්සුන්ට දැක්කම wow!" කියන්න හේතු වෙන reason එක! 😍

➡️ එහෙනම් ඊලඟ lesson එකට ඔයාලා එන්න Flexbox සෙට් එකට!

අද ලියපු code උන්ව test කරලා බලන්න – ආදරෙන්ම කියනවා:

👉 "Try karala balapan, break karala balapan!" 💻🧪

🙌 අනේ ඔයාලගේ support එක එලියට එන්න පුලුවන්. Like එකක්, Comment එකක්, Share එකක් – ඔයාලගෙ ඉස්සරහටම content එක ගන්න! ❤️✨

📦👉 ඊලඟ පාඩම: CSS Flexbox – ඒකෙන් responsive layouts ගහන්න හැමකෙනාටම ලේසි! 🧘‍♂️🧭

Ready වෙලා ඉන්න!