CSS Display and Position
The display and position properties decide where an element sits on the page and how it behaves next to other elements.
Block and Inline Elements
Every element has a default display value.
| Value | Behaviour | Examples |
|---|---|---|
block | Starts on a new line and takes the full width | div, p, h1, ul |
inline | Stays in the line of text, width and height are ignored | span, a, strong |
inline-block | Stays in the line, but accepts width, height and padding | button, img |
none | The element is hidden and takes no space |
You can change the default with CSS:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.tag {
display: inline-block;
width: 90px;
padding: 6px;
margin: 4px;
text-align: center;
background-color: #e0e7ff;
}
.block-link {
display: block;
background-color: #fde68a;
padding: 8px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
<a class="block-link" href="#">This link takes the full width</a>
<p class="hidden">You will not see this paragraph.</p>
</body>
</html>display: none removes the element from the layout. visibility: hidden hides it but keeps its empty space.
The position Property
position lets you move an element away from its normal place. After setting it, you use top, right, bottom and left to move it.
| Value | Positioned from | Scrolls with the page? |
|---|---|---|
static | Normal place (the default; top/left do nothing) | Yes |
relative | Its own normal place | Yes |
absolute | The nearest positioned parent | Yes |
fixed | The browser window | No, it stays on screen |
sticky | Normal place, until you scroll past a point | Sticks at that point |
Relative and Absolute
A common pattern: give the parent position: relative, then give the child position: absolute. The child is now placed inside the parent's corners.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.product {
position: relative;
width: 220px;
height: 140px;
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
padding: 15px;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
background-color: crimson;
color: white;
padding: 4px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="product">
<h3>Wireless Mouse</h3>
<p>Rs 1,200</p>
<span class="badge">NEW</span>
</div>
</body>
</html>The badge stays in the top-right corner of the card, wherever the card is on the page.
Fixed and Sticky
position: fixed is used for things that should always be visible, such as a WhatsApp chat button. position: sticky is great for headers that stick to the top once you scroll.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
header {
position: sticky;
top: 0;
background-color: #264de4;
color: white;
padding: 12px;
}
.chat {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: white;
padding: 12px 16px;
border-radius: 30px;
}
.content { height: 1500px; padding: 12px; }
</style>
</head>
<body>
<header>Workownix Tutorials</header>
<div class="content">Scroll down. The header sticks to the top and the green button never moves.</div>
<div class="chat">Chat with us</div>
</body>
</html>z-index
When positioned elements overlap, z-index decides which one is on top. A higher number comes in front. It works only on positioned elements (not static).
Example
.popup {
position: fixed;
z-index: 100;
}Exercise
Exercise
A child has position: absolute. What is it positioned against?