CSS Position Property

What does this property do?

It determines how an element is positioned in the document.

Some Clarifications

offset properties refers to top/right/bottom/left properties
an element’s natural position / where an element would nat…


This content originally appeared on DEV Community and was authored by DEV Community

What does this property do?

It determines how an element is positioned in the document.

Some Clarifications

  • offset properties refers to top/right/bottom/left properties
  • an element's natural position / where an element would naturally be refers to the element without position property defined on it
  • positioned element refers to an element with display set to anything other than static

All CSS Position Values

  • position:static; (default)
  • position:relative;
  • position:absolute;
  • position:fixed;
  • position:sticky;

static

  1. The default value.
  2. Cannot use offset properties.

relative

  1. Allows use of offset properties.
  2. The offset properties are based on where the element would naturally be.
  3. The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.

absolute

  1. Allows use of offset properties.
  2. The offset properties are based on the closest non-static ancestor or the initial viewport. This means that if the body is scrollable the absolute element will not move with the viewport.
  3. Elements around it will treat it as if it doesn't exit.

fixed

  1. Allows use of offset properties.
  2. The offset properties are based on the viewport(not the initial viewport) or if any ancestor has transform, perspective or filter set to anything other than none.
  3. Elements around it will treat it as if it doesn't exit.

sticky

  1. Allows use of offset properties.
  2. The offset properties are based on nearest ancestor with overflow set to anything other than visible. If it cannot find one, it uses <html> or <body>, check using document.scrollingElement.
  3. The element is also constrained by its closest block level ancestor. i.e. it cannot leave that ancestor.
  4. The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.

Summary

  1. Positioned elements all allow the use of offset properties.
  2. Elements around static, relative, sticky elements will treat them as if they are still in their natural positions.
  3. Elements around absolute and fixed elements will treat them as if they don't exist.


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-03-13T02:47:51+00:00) CSS Position Property. Retrieved from https://www.scien.cx/2022/03/13/css-position-property-2/

MLA
" » CSS Position Property." DEV Community | Sciencx - Sunday March 13, 2022, https://www.scien.cx/2022/03/13/css-position-property-2/
HARVARD
DEV Community | Sciencx Sunday March 13, 2022 » CSS Position Property., viewed ,<https://www.scien.cx/2022/03/13/css-position-property-2/>
VANCOUVER
DEV Community | Sciencx - » CSS Position Property. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/13/css-position-property-2/
CHICAGO
" » CSS Position Property." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/03/13/css-position-property-2/
IEEE
" » CSS Position Property." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/03/13/css-position-property-2/. [Accessed: ]
rf:citation
» CSS Position Property | DEV Community | Sciencx | https://www.scien.cx/2022/03/13/css-position-property-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts