CSS Positioning

In CSS Positioning of elements is very important topic. CSS having five type of Positioning method

1. static
2. relative
3. fixid
4. absolute
5. sticky

Static

default form of HTML
Do not have any specific styling
We can not use top, bottom, left, r…


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

In CSS Positioning of elements is very important topic. CSS having five type of Positioning method

1. static
2. relative
3. fixid
4. absolute
5. sticky

Static

  1. default form of HTML
  2. Do not have any specific styling
  3. We can not use top, bottom, left, right with static positioning

Link

relative

  1. Give affect relative to its normal position.
  2. Normally No element can occupy its position. CSS relative property Demonstration

Fixed

  1. give affect relative to view port.
  2. It always occupy the same place unless page is scroll.
  3. top, bottom, left, right can be used with it
  4. Normally other element occupy blank space which it left

CSS Fixed property Demonstration

Absolute

  1. relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).
  2. It move along the scroll
  3. if there are no ancestor exits it used document body
  4. space left by element is fulfilled by another element.

CSS Absolute Property Demonstration

Sticky

  1. position based on the scroll
  2. element toggle between relative and fixed
  3. Element perform like relative property until viewport does not match then perform as fixed

CSS Absolute Property Demonstration

All the positioning property is applied as:

.className or #Id or tag {
positon: ProperyName; fixed);
}
PropertyName: static OR relative OR absolute OR sticky

Thanks for Reading...

By Tech 9-on


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


Print Share Comment Cite Upload Translate Updates
APA

Vishesh Kumar | Sciencx (2021-10-14T06:47:38+00:00) CSS Positioning. Retrieved from https://www.scien.cx/2021/10/14/css-positioning/

MLA
" » CSS Positioning." Vishesh Kumar | Sciencx - Thursday October 14, 2021, https://www.scien.cx/2021/10/14/css-positioning/
HARVARD
Vishesh Kumar | Sciencx Thursday October 14, 2021 » CSS Positioning., viewed ,<https://www.scien.cx/2021/10/14/css-positioning/>
VANCOUVER
Vishesh Kumar | Sciencx - » CSS Positioning. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/14/css-positioning/
CHICAGO
" » CSS Positioning." Vishesh Kumar | Sciencx - Accessed . https://www.scien.cx/2021/10/14/css-positioning/
IEEE
" » CSS Positioning." Vishesh Kumar | Sciencx [Online]. Available: https://www.scien.cx/2021/10/14/css-positioning/. [Accessed: ]
rf:citation
» CSS Positioning | Vishesh Kumar | Sciencx | https://www.scien.cx/2021/10/14/css-positioning/ |

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