+ 6

[ANSWERED] Position property CSS

How does the position property works?What are top left bottom and right properties? What are various options (relative/fixed etc)available with position property and what do they do? FInally, what is the thing when u make position of parent as relative and child as absolute? And please don't share w3school links, I didnt get this topic from that. Thanks

css web

21st Dec 2017, 2:54 PM

Meharban Singh

5 Answers

+ 6

Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottomattributes. Using the position you specify with these attributes, the element is then placed at that position within its last ancestor element which has a position attribute of anything other than static(page elements default to static when no position attribute specified), or the document body (browser viewport) if no such ancestor exists. For example, if I had this code: <body> <div style="position:absolute; left: 20px; top: 20px;"></div> </body> ...the <div> would be positioned 20px from the top of the browser viewport, and 20px from the left edge of same. However, if I did something like this: <div id="outer" style="position:relative"> <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div> </div> ...then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:staticbecause we've explicitly set it to use position:relative. Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though. For example, if I had this code: <span>Span1</span> <span>Span2</span> <span>Span3</span> ...then all three <span>elements would sit next to each other without overlapping. If I set the second <span>to use relative positioning, like this: <span>Span1</span> <span style="position: relative; left: -5px;">Span2</span> <span>Span3</span>

21st Dec 2017, 3:02 PM

James16

+ 8

Take a look at this http://cssreference.io/property/position/

21st Dec 2017, 3:54 PM

Ranjan Bagri

+ 4

Thanks guys :-) You are the best! I hope I could mark all 3 the best

22nd Dec 2017, 8:11 AM

Meharban Singh

+ 1

It helps you place your contents where ever you want in your window. The default value of position property is static. The top, right, bottom and left property only takes place if you set the position to either relative, absolute or fixed. I just want to say that I know how this property works, but unfortunately, I can't explain it well to you. So, I suggest you visit this tutorial on YouTube --> https://www.youtube.com/watch?v=Rf6zAP4YnZA, this tutorial focuses on CSS Positioning. And lastly, I assure you that after you watch this video, you'll surely understand how CSS Position Property works. Hope this will answer your question :).

21st Dec 2017, 3:09 PM

Jeric So