CSS Positioning: Static, Relative, Absolute, Fixed

Learn about different CSS positioning schemes: static, relative, absolute, and fixed. Understand how they affect element placement.

⬅ Previous Next ➡

CSS Positioning: Static

This page demonstrates the static positioning scheme in CSS.

Understanding Static Positioning

By default, all HTML elements have a position property set to static. This means that the element is positioned according to the normal document flow.

The normal document flow is the order in which elements appear in the HTML source code. Block-level elements (like <div>, <p>, <h1>) take up the full width available and stack vertically. Inline elements (like <span>, <a>, <img>) flow horizontally within their containing element.

Key Characteristics of Static Positioning:

Elements are laid out in the order they appear in the HTML source.
The top, right, bottom, and left properties have no effect on statically positioned elements.
The element's position is determined by the browser based on the surrounding elements and the document's overall structure.

Example

This is a static element.

This is another static element. Even though top and left are specified, they are ignored.

And yet another static element.

CSS Basics

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS Syntax

A CSS rule set consists of a selector and a declaration block:

 selector {
                    property: value;
                }

Selector: Selects the HTML element(s) to style. Examples: p (paragraph), .container (class), #my-id (ID).
Property: The style attribute you want to change. Examples: color, font-size, background-color.
Value: The value you assign to the property. Examples: red, 16px, #ffffff.

Ways to Include CSS

Inline Styles: Directly within HTML elements using the style attribute. (Generally avoided for larger projects).
```
 <p style="color: blue;">This is a paragraph with inline styling.</p> 
```

Internal Styles: Within the <style> tag in the <head> section of your HTML document.

 <head>
                    <style>
                        p { color: green; }
                    </style>
                </head>

External Stylesheets: Recommended for larger projects. Create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link> tag.
```
 <head>
                    <link rel="stylesheet" href="styles.css">
                </head> 
```

⬅ Previous Next ➡