Scribd
Upload
10 views2 pages

Positioning

The document explains various CSS positioning modes: static, relative, absolute, fixed, and sticky. Static positioning follows the normal document flow, while relative positioning offsets elements from their normal position. Absolute positioning allows precise placement without affecting surrounding elements, fixed positioning remains in place during scrolling, and sticky positioning behaves like normal elements until scrolled past, becoming fixed.

Uploaded by

Iker Velez Lucas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views2 pages

Positioning

The document explains various CSS positioning modes: static, relative, absolute, fixed, and sticky. Static positioning follows the normal document flow, while relative positioning offsets elements from their normal position. Absolute positioning allows precise placement without affecting surrounding elements, fixed positioning remains in place during scrolling, and sticky positioning behaves like normal elements until scrolled past, becoming fixed.

Uploaded by

Iker Velez Lucas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Positioning

The default positioning mode in CSS is position: static. In static positioning properties top, right,
bottom and left do no affect the position of the element.

Relative positioning is pretty much the same as static, but properties top ,right, etc displace the
element relative to its normal position in the flow of the document.

Static positioning
Default. The element is positioned according to the Normal Flow of the document. top, right,
bottom, left and z-index have no effect.

Relative positioning
The element is positioned according to the normal flow of the document, and then offset relative
to itself based on the values top, right, bottom and left.

This value creates a new 'stacking context' when the value of z-index is not auto.

Absolute positioning
Allows you to position something at an exact point on the screen without disturbing the other
elements around it.

Using absolute positioning on an element will remove that element from the normal document
flow while being positioned relative to an ancestor element.
Using absolute positioning allows you to position elements anywhere on the screen using top,
right, bottom, and left properties.

This property is really usefull when you want to position something at an exact point on the
screen, without disturbing any of the other elements.

Some good use cases for absolute positioning are:

modals
images with a caption on it
icons on top of other elements

Absolute positioning has very specific use cases. If posibble, using flexbox or grid should be
priorirized. Absolute positioning shouldnt be used to do entire page layouts
if !static, absolute positioning will use that element as his parent. You can use then top, left, etc.

The margins of absolutely positioned boxes do not collapses with other margins, because
creates a new stacking context.

Fixed positioning (Fijado como chicle)


Fixed elements are cool. They are removed from the normal flow of the document and are
positioned relative to the viewport. You basically use top, right, bottom and left properties to
position it, and it will stay there as the user scrolls.

Is specially useful for things like navigation bars and floating chat buttons.

Sticky positioning
They act like normal elements until you scroll past them, then they start behaving like fixed
elements. Dont taken out of the normal flow of the document.

Its useful for things like section-headings.

Ensure that elements positioned with an absolute or fixed value do not obscure other content
when the page is zoomed to increase text size.

You might also like