MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS positioning

The CSS position property is used to set position for an element. it is also used to place an element behind another and also useful for scripted animation effect. You can position an element using the top, bottom, left and right properties.


Parameter Details
static Default value. Elements render in order, as they appear in the document flow. The top, right, bottom, left and z-index properties do not apply.
relative The element is positioned relative to its normal position, so left:20px adds 20 pixels to the element's LEFT position
fixed The element is positioned relative to the browser window
absolute The element is positioned relative to its first positioned (not static) ancestor element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
sticky Experimental feature. It behaves like position: static within its parent until a given offset threshold is reached, then it acts as position: fixed.
unset Combination of initial and inherit.


Absolute Position

When absolute positioning is used the box of the desired element is taken out of the Normal Flow and it no longer affects the position of the other elements on the page. Offset properties:

1. top

2. left

3. right

4. bottom

specify the element should appear in relation to its next non-static containing element.


Fixed position

Defining position as fixed we can remove an element from the document flow and set its position relatively to the browser window. One obvious use is when we want something to be visible when we scroll to the bottom of a long page.


Relative Position

Relative positioning moves the element in relation to where it would have been in normal flow .Offset properties:

1. top

2. left

3. right

4. bottom

are used to indicate how far to move the element from where it would have been in normal flow


Static positioning

The default position of an element is static.

This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.






Conclusion

In this page (written and validated by ) you learned about CSS Positioning . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Layout Control.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.