+ 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
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>
+ 8
Take a look at this
http://cssreference.io/property/position/
+ 4
Thanks guys :-)
You are the best!
I hope I could mark all 3 the best
+ 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 :).
0
it's up