Doubt with style attribute in HTML

In div tag, we use style attribute. What is the function of the position property of the attribute ?

In the example of ‘Div Tag’ section, only one value is alloted to position and that is fixed. What can be the other possible values and how the output will change based on that ?

Please give example also.

The style tag in HTML is used for styling an element and is an inline tag overriding other global style tags or a stylesheet.

The position property sets a specific type of positioning method used for an element.
The other values that can be used instead of fixed are static, relative, absolute, initial, inherit, or sticky.
static - Elements render in order, as they appear in the document flow
absolute - The element is positioned relative to its first positioned (not static) ancestor element
relative - The element is positioned relative to its normal position
sticky - The element is positioned based on the user’s scroll position. A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed).
inherit - Inherits this property from its parent element.
initial - Sets this property to its default value.

To see how exactly these values work you can use this link,
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position

For sticky,
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky

Also if you want to read up on it more, try these two links,
https://www.w3schools.com/tags/tag_style.asp
https://www.w3schools.com/cssref/pr_class_position.asp

Hope this helps

Thank You @saswat.mish62 for your wonderful explanation along with useful links.

1 Like

That means, you wnna say that the position also depends on its previous position, based on the input ? Please explain

Depending on the value assigned to the position property yes.
To position any element there are other properties which can be used too, like left, right, top and bottom.

The position property just sets the type of positioning. Take the example of the navigation bar of this particular website.

If you use the Inspect Element command you will find the position property is assigned fixed. What fixed does is it sticks to the element to the viewport. The divs will stick to the screen at that place even if the page is scrolled, in this case the top of the screen.

Now if you changed it to relative, it will stay at the top and will disappear if you scroll down. Add 50 px to the top and it will leave a 50 px gap at the top and all elements of the page move down 50px. Which is what relative does. It positions the element relative to the top, bottom, left or right of where it is was placed when all other positioning values are 0.

If you change it to static, it just stays at the top where it was originally set when creating the HTML document. But try adding other positioning properties to it like top, bottom, left or right and it wouldn’t move. Static is not affected by those properties.

For absolute, the element is positioned relative to the nearest positioned ancestor. Since the navigation bar has no ancestor, it just stays at the top. But if you add a top 50px to it, it will overlap with the elements below it and not move everything down by 50 px like what happens in relative.

If the explanation seems hard to understand, try using this link,
https://www.w3schools.com/css/css_positioning.asp

Also, use the inspect element feature or the css inspector extension on Chrome to play around with the html and css if you have doubts. Nothing clears a concept better than applying it yourself.

Hope this helps.

1 Like

Thanks for ur effort in putting this explanation. Also explain sticky, inherit, and initial in this method.

1 Like