Positioning Elements

In CSS, the position property allows you to specify how an element should be positioned on the page. There are several different values that you can use for the position property:

• static: This is the default value and specifies that the element should be positioned according to the normal flow of the page.
• relative: This value specifies that the element should be positioned relative to its original position in the normal flow of the page. You can use the top, right, bottom, and left properties to specify the distance that the element should be moved from its original position.
• absolute: This value specifies that the element should be positioned absolutely on the page, meaning that it will be removed from the normal flow of the page and positioned at a specific location using the top, right, bottom, and left properties.
• fixed: This value is similar to absolute positioning, but the element will remain fixed in place even when the page is scrolled.
• sticky: This value is a hybrid of relative and fixed positioning and allows the element to behave like a regular element until it is scrolled to a certain point, at which it becomes fixed in place.

When using absolute positioning in CSS, an element is removed from the normal flow of the page and positioned at a specific location using the top, right, bottom, and left properties. The syntax for absolute positioning is:

The top, right, bottom, and left properties to specify the element's distance from the corresponding edge of the nearest positioned ancestor element (or the page itself if no ancestor element is positioned). If multiple positioning properties are specified, the last one takes precedence.

In this example, the <div> element is positioned 16 pixels from the top of the page and 40 pixels from the left, no matter what's the other content of a page.

It's important to note that absolute positioning is often used with the z-index property, which allows you to specify the stacking order of elements on the page. Elements with a higher z-index value will be displayed on top of elements with a lower z-index value.

Relative positioning is similar to absolute positioning, but it positions the element relative to its original position on the page. The syntax for relative positioning is:

In this example, the blue <div> would be just under the white one in the normal flow, but it used a relative positioning, so it was also shifted 16 pixels down and 40 pixels left from under the white box.

It's important to note that the box model properties (margin, border, and padding) can also affect the positioning of an element. For example, if you set the margin of an element to 20 pixels on all sides, the element will be positioned 20 pixels away from the edges of its parent element.

See you in the Introduction to CSS Part II!