var base_url = 'https://www.bapugraphics.com/';

What is CSS positioning?

The position CSS property specifies how an element is positioned in a html document. The top, right, bottom, and left properties determine the last location of positioned elements.

There are five different position values:

  • static
  • relative
  • fixed
  • absolute
  • sticky

CSS Position - Relative

Relative positioning

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. The effect of relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location. 

 

CSS Position - Absolute

Absolute positioning

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the 

 of the document.

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.

 

CSS Position - Fixed

Fixed positioning

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. When an ancestor has the transform or perspective property set to something other than none, that ancestor is used as the container instead of the viewport (see CSS Transforms Spec). In printed documents, the element is placed in the same position on every page.

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.

 

CSS Position - Sticky

Sticky positioning

The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. The effect of sticky on table-related elements is the same as relative. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: Github issue on W3C CSSWG)

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example.

 

HTML and CSS Positioning Task 1

HTML and CSS Positioning Task 2

HTML and CSS Positioning Task 3

 

HTML and CSS Positioning Task 4

 

Contact Details

Mobile Number :
9891 222 738,
9891 50 1300

E-mail : contactbapugraphics@gmail.com

ADDRESS: H-17 / 263, First Floor,Sector 7,
Near Rohini West Metro Station,
Opposite Metro Pillar No. 425
Rohini, Delhi - 110085

Working hours

Day Timing
Monday To Friday 8:00 Am To 7:00Pm
Saturday 10:00 Am To 6:00Pm