Learning CSS - Display, Visibility, and Basic Positioning
This episode covers how elements are displayed: display block, inline, and inline-block, plus the difference between visibility and display none. Also covered are static, relative, absolute, and fixed positioning as the foundation for placing elements.
#Introduction
After understanding the box model in episode 4, the next question is how boxes are arranged in a page. The answer starts with display — which defines an element's basic behavior — and position — which defines how elements are positioned precisely, plus visibility, which is often confused with display.
#Display: Block, Inline, and Inline-Block
Block elements fill the entire parent width and start a new line (div, p, h1, section), while inline elements flow within text and are only as wide as their contents (a, span, strong). Inline elements can't be given width or height.
#Inline-Block and Changing Display
.badge {
display: inline-block;
width: 24px;
height: 24px;
background-color: #2563eb;
border-radius: 50%;
}
.menu-utama {
display: flex;
}display: inline-block flows like inline but respects width, height, margin, and padding like block — great for badges or icons. display: flex enables Flexbox (episode 7); display: none removes the element from the layout.
#Visibility vs Display
display: none removes the element from the document flow — its space is gone. visibility: hidden hides the element visually but keeps its space:
.dihapus { display: none; }
.disembunyikan { visibility: hidden; }
.tampil { visibility: visible; }Use display: none to remove an element entirely; use visibility: hidden when its position must be preserved, for example as a placeholder for asynchronously loaded content.
#Basic Positioning
position: static is the default — elements flow normally and the top, left, right, bottom properties have no effect. position: relative shifts the element from its normal position without leaving its space:
.badge-nomor {
position: relative;
top: -4px;
}
.kartu {
position: relative;
}
.lencana {
position: absolute;
top: 8px;
right: 8px;
background-color: #dc2626;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #0f172a;
z-index: 100;
}position: absolute takes the element out of the flow and positions it relative to the nearest positioned ancestor — which is why the parent gets position: relative as the anchor for a badge in the card corner. position: fixed pins to the viewport, so the navbar stays visible while scrolling.
#Z-Index and Stacking Context
When positioned elements overlap, z-index decides who's in front — larger values appear on top:
.modal {
position: fixed;
z-index: 50;
}
.overlay {
position: fixed;
z-index: 40;
background-color: rgba(0, 0, 0, 0.5);
}z-index only works on positioned elements (other than static) and on flex/grid items.
#Exercise: Navigation and Badge
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar"><a href="#">Beranda</a><a href="#">Artikel</a></nav>
<div class="kartu"><span class="lencana">Baru</span><h2>Judul Kartu</h2></div>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 60px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #0f172a;
}
.navbar a {
display: inline-block;
color: white;
padding: 12px 16px;
}
.kartu {
position: relative;
max-width: 400px;
margin: 32px auto;
padding: 24px;
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.lencana {
position: absolute;
top: 8px;
right: 8px;
background-color: #dc2626;
color: white;
border-radius: 8px;
padding: 2px 8px;
}Run npx serve . and observe the navbar staying on top while the page scrolls and the badge pinned to the card corner.
#Common Mistakes and Solutions
Floating absolute elements: check whether the ancestor has position: relative — this is the most common reason a badge "runs away" to another corner of the page.
Top and left have no effect: the element is probably still position: static; offset properties only work on relative, absolute, fixed, or sticky elements.
Display none removes the space: to hide an element temporarily, use visibility: hidden when its position must be preserved.
#Closing
Key takeaways:
- Block fills a full line; inline flows within text; inline-block combines both.
display: noneremoves the space;visibility: hiddenpreserves it.position: relativeshifts an element without leaving its position.- Absolute positions relative to a positioned ancestor; fixed pins to the viewport.
z-indexdecides layer order only on positioned elements.- Always give the parent
position: relativewhen placing absolute children.
In the next episode, episode 6, we'll cover color, opacity, and modern color models — HEX, RGB, and HSL formats, the opacity property, and modern color models for a wider gamut. Get your browser ready for some fun color experiments.