CSS Lesson 05 - Display & Position

1. display property

display: block;        /* full width, new line */
display: inline;       /* content width, same line, no margin top/bottom */
display: inline-block; /* same line + width/height control */
display: none;         /* hide completely (no space) */
display: flex;         /* flexbox (Lesson 06) */
display: grid;         /* grid (Lesson 07) */

inline — တစ်ကြောင်းတည်း ကပ်နေ၊ width/height မချနိုင်

span 1 span 2 longer span 3 4

block — new line ဆင်းတယ်၊ full width ယူ

div 1 (block)

div 2 (block — new line)

inline-block — တစ်ကြောင်းတည်း + width/height ချနိုင်

Item 1 Item 2 Item 3

2. display:none vs visibility:hidden

display: none;       /* hide + no space (removed from flow) */
visibility: hidden;  /* hide + KEEPS space */
opacity: 0;          /* transparent + keeps space + still clickable */

BOX A (always visible)

BOX B (toggling)

BOX C (always visible)

Click buttons to see difference

3. position: static (Default)

position: static;   /* default — normal flow, top/left မအလုပ်လုပ်ဘူး */

Box 1 (static)

Box 2 (static)

Box 3 (static)

Normal document flow — top/left properties don't work

4. position: relative

position: relative;
top: 10px;    /* မူလနေရာကနေ ဆင်း */
left: 20px;   /* မူလနေရာကနေ ညာ */
/* မူလ space ကို ထိန်းဆည်းထားတယ် */

Normal

relative
top:10 left:20

Normal (gap ရှိနေတုန်း)

5. position: absolute ⭐ အသုံးများဆုံး

/* Parent must have position: relative! */
.parent { position: relative; }
.child  {
  position: absolute;
  top: 10px;
  right: 10px;
  /* parent ကို reference ယူပြီး ပေါ်လောတယ် */
}

Parent (position: relative)

top:8 right:8

bottom:8 left:8

center (top:50% left:50%)

⭐ Common pattern: Badge, tooltip, dropdown, modal overlay အတွက် သုံးတယ်

6. position: fixed

position: fixed;
/* Viewport (browser window) ကို reference ယူ */
/* Scroll လုပ်ရင်လည်း နေရာမပြောင်း */
top: 0; left: 0; right: 0;   /* top navbar */
bottom: 20px; right: 20px;   /* floating button */

Screen corner မှာ fixed element ပေါ်မယ် — scroll လုပ်ရင်လည်း မပျောက်ဘူး

7. position: sticky

position: sticky;
top: 0;    /* scroll ဆင်းလာရင် top:0 မှာ ကပ်ကျန်

Scroll content 1

Scroll content 2

Scroll content 3

Scroll content 4

Scroll content 5

Scroll content 6

Scroll content 7

Scroll content 8

8. z-index — Layer Order

/* z-index က position:relative/absolute/fixed မှာပဲ အလုပ်လုပ် */
.behind { position:absolute; z-index: 1; }
.middle { position:absolute; z-index: 2; }
.front  { position:absolute; z-index: 3; }

z:1 (back)

z:2

z:3 (front)

z:10 (top!)

📌 Study Checklist

အပေါ်က concept ကို တစ်ကြောင်းချင်းဖတ်ပြီး example ကို ကိုယ်တိုင်ပြန်ရေးကြည့်ပါ။
Code/command ပါတဲ့ lesson ဆိုရင် value/name/path တစ်ခုခု ပြောင်းပြီး result ဘာကွာလဲ စမ်းပါ။
မမှတ်မိသေးတဲ့ keyword 3 ခုကို notebook ထဲရေးပြီး နောက် lesson မသွားခင် ပြန်ရှင်းကြည့်ပါ။
ပြီးရင် Home / Hub ကိုပြန်သွားပြီး next lesson ဆက်သင်ပါ။

🎨 CSS Lesson 05 — Display & Position