DEV Community: Tamizh K

CSS Position

Tamizh K — Wed, 05 Aug 2026 07:43:06 +0000

CSS Position: The Property That Changed the Way I Build Web Pages

When I first started learning CSS, I thought designing a webpage was just about changing colors, fonts, and spacing. Everything seemed easy until I wanted to place an element exactly where I wanted it. That's when I came across the position property.

At first, I didn't understand the difference between relative, absolute, fixed, and sticky. They all sounded similar, and I often used the wrong one. But after practicing with small projects, I realized that each position value has its own purpose. Once I understood them, creating layouts became much easier.

In this blog, I'll explain CSS positioning in the same simple way that helped me understand it.

What is the CSS Position Property?

The position property tells the browser how an element should be placed on a webpage. It also decides whether properties like top, right, bottom, and left can be used to move the element.

CSS provides five types of positioning:

Static
Relative
Absolute
Fixed
Sticky

Let's look at each one with simple explanations.

1. Static Position

This is the default position for every HTML element. If you don't write any position property, the browser automatically uses static.

Elements appear in the normal order from top to bottom. Even if you try to use top or left, nothing will happen because those properties don't work with static positioning.

Example

.box {
    position: static;
}

When should you use it?

Honestly, most of the time you don't even have to think about it. If your webpage looks fine without moving elements around, static positioning is enough.

2. Relative Position

Relative positioning was the first one that actually made sense to me.

When you use position: relative, the element stays in its original place, but you can move it using top, left, right, or bottom. Even after moving it, the browser still remembers its original space.

Example

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Think of it like this

Imagine your chair is in your room. You drag it a little to the right, but everyone still remembers where the chair originally belonged. That's exactly how relative positioning works.

Common uses

Adjusting the position of buttons or icons
Creating a parent element for absolute positioning
Making small layout changes without affecting other elements

3. Absolute Position

This was the most confusing position for me in the beginning.

An absolutely positioned element leaves the normal document flow. Instead of following the regular layout, it is positioned relative to its nearest parent that has a position other than static.

If there isn't one, the element is positioned relative to the entire page.

Example

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 15px;
    right: 15px;
}

When I first forgot to add position: relative to the parent, my element suddenly jumped to the corner of the webpage. That's a mistake almost every beginner makes.

Common uses

Notification badges
Icons inside input boxes
Text on images
Pop-up elements

4. Fixed Position

Fixed positioning is one of the easiest to understand.

A fixed element stays in the same place on the screen, even when the user scrolls the page.

Example

.help-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

You have probably seen this on many websites.

A WhatsApp chat button, a "Back to Top" button, or a customer support icon usually stays in one place while you scroll. That's because it uses fixed positioning.

5. Sticky Position

Sticky positioning feels like a combination of relative and fixed.

At first, the element behaves normally. Once you scroll to a certain point, it sticks to the top of the screen and stays there until its parent section ends.

Example

.header {
    position: sticky;
    top: 0;
}

This is commonly used for navigation bars because users can always see the menu while reading a long page.

Understanding Top, Right, Bottom, and Left

These properties help move positioned elements.

.box {
    position: absolute;
    top: 30px;
    left: 40px;
}

top moves the element down from the top.
bottom moves it up from the bottom.
left moves it right from the left edge.
right moves it left from the right edge.

These properties won't work if the element uses position: static.

My Biggest Mistakes While Learning Position

Like many beginners, I made a few mistakes.

The first mistake was trying to use top and left with static positioning. I kept wondering why nothing changed.

The second mistake was forgetting to give the parent element position: relative before using position: absolute on the child. Because of that, my element appeared in completely unexpected places.

I also tried to build entire page layouts using only absolute positioning. Later I learned that Flexbox and CSS Grid are much better choices for creating responsive layouts.

When Should You Use Each Position?

Here's the simple rule I follow now:

Use Static for normal content.
Use Relative when you need to move an element slightly or create a reference for child elements.
Use Absolute for badges, overlays, and icons.
Use Fixed for floating buttons and permanent navigation.
Use Sticky for menus or headers that should stay visible while scrolling.

HTML Attributes

Tamizh K — Wed, 15 Jul 2026 09:36:59 +0000

Getting Comfortable with HTML Attributes

When I first started learning HTML, attributes felt like tiny details hiding inside the tags. I understood the basic structure of a webpage, but I didn’t fully understand why some elements had extra words like href, src, or alt.

Over time, I realized attributes are what make HTML elements useful. They add meaning, behavior, and context. Without attributes, a webpage would still have structure, but it would feel limited and incomplete.

What HTML attributes really do

An HTML attribute gives extra information about an HTML element. It is written inside the opening tag and usually has a name and a value.

In simple words, the tag creates the element, and the attribute explains something about that element.

For example:

Here, href tells the browser where the link should go.

Why attributes matter

Attributes may look small, but they make a big difference in how a webpage works. They can:

Connect one page to another using links.
Display images, videos, and other media.
Improve accessibility for users and screen readers.
Help CSS and JavaScript identify elements.
Control forms, buttons, and user input.

Without attributes, HTML would only show content. Attributes help that content become interactive and meaningful.

Some attributes I use all the time

href for links

The href attribute is used with anchor tags. It tells the browser the destination of the link.

src for images

The src attribute gives the path to an image, video, or audio file.

alt for accessibility

The alt attribute describes an image. It is helpful when the image does not load and also important for screen readers.

id and class for styling

id gives a unique name to an element, while class is used when multiple elements share the same styling or behavior.

placeholder and required in forms

These attributes make forms easier for users to understand and complete.

A few habits that helped me

Use lowercase attribute names. It keeps the code cleaner and easier to read.
Put attribute values inside double quotes. This is the common and recommended style.
Always write meaningful alt text for images. It improves accessibility and user experience.
Use id only for unique elements. If several elements need the same styling, use class instead.
Avoid too much inline style. External CSS is usually easier to manage.

What Happens If We Don't Use HTML Attributes?

HTML attributes may seem like small additions, but they play a major role in how a webpage works. Without attributes, HTML elements lose much of their functionality and flexibility.

For example, if you create a link without the href attribute, the text will appear on the page, but clicking it won't take the user anywhere. Similarly, an image without the src attribute cannot display because the browser doesn't know which image to load.

Attributes also improve user experience. Without the placeholder attribute, input fields won't show helpful hint text. Without the required attribute, users can submit forms without filling in important information.Accessibility is another area that is affected. If you don't use the alt attribute for images, screen readers cannot describe the image to visually impaired users, making your website less accessible.

In addition, CSS and JavaScript often rely on attributes like id and class to style elements or add interactivity. Without them, it becomes much harder to design and control your webpage.