How to Control HTML CSS Position Property

Hello, my name is Roman. I’m a starting full-time student at and it’s my first public article in my life. After I finished several projects on HTML and CSS I’ve found one of the most confusing and unclear properties: position.Even though it seems easy and clear for most students, there are plenty of us who still struggle with this thing in every project. There are no algorithms or difficult data structures, no new concepts or more properties to use it. It’s a property for a little bit of different usage. Due to learning it, one person told that half knowledge sometimes is even worse than an absence of knowledge. That’s why I guess every beginner should spend a little time learning it. Instead of sticking with it for hours or days changing CSS properties all around until it will finish.

First of all, every element has the default position value, and it’s called static. Position: static has no top, left, bottom and right values, it is always positioned according to the normal flow of the page.

The second one is position: relative. Unlike static, a relative has a top, right, bottom and left values. And it’s position depends on its normal position. This means that you can move an element all-around it’s starting position.

The third one is absolute. It’s been a bone in a throat for me for a while. But it allows us to build some interesting and good-looking stuff. Describing its behavior it looks like it thorn from a document flow. To give it a place inside a certain container this container should have a position property different from static. Otherwise, its parent container will be a body container and you can always look for it on the left upper corner of your document. Hence never forget to apply a position property to a parent element if you want to have it inside. Most of the time I’ve been using a relative property for a parent element. Also both relative and absolute may have negative values. And absolute positioned element by default always placed above other elements. You can place it below other elements decreasing z-index. Something like

(z-index: -1)

for example.

On the first screen, you can see a parent’s element position: static. Both absolute and relative blocks have top and left values equal to 0.On the second screen, you see a parent’s position equal to a relative. Also you can see how absolute positioned element overlaps above relative.Some time ago I started the project where I needed to put the search icon into an input element and leave it in the same place. As in the example below. All I should have been doing it’s to put an icon and input field into one container and give it a relative position property. Then I adjusted some top and left properties to an icon and it always stays in the same place.

The next position value is “Fixed”. It stays always in the same place even if the page is scrolled down. You could see it often on the navigation bars that always stay on the top of the screen while you scrolling down. It also takes top, left, bottom and right positioning values.

Position: “Sticky”. That thing that I used less than another. Honestly only once for an educational purpose. It is a kind of combination between relative and fixed positions. This property gives an element ability to be used relatively user’s scroll position. In other words, it behaves like a relative until you achieve it in its position with scrolling. And after it behaves as fixed.

For a more detailed explanation, you may watch one interesting video:

That’s it for now, I hope this short explanation will help someone.
Thank you.