Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Static Position

The static value is the default for the position property. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. The top, right, bottom, left, and z-index properties have no effect on a statically positioned element.

Example 1: Default Behavior

HTML

<div class="static-element">
  This is a static element. It just sits here.
</div>
<p>This paragraph follows the natural flow of the document.</p>

CSS

/* No special positioning is applied to this div */
.static-element {
  position: static;
  background-color: lightblue;
}

Explanation: The div with the class .static-element has position: static;. It appears on the page exactly where it falls in the HTML document order, right before the paragraph.

Example 2: Ignoring Offset Properties

HTML

<div class="static-offset-ignored">
  I have top and left properties, but they are ignored.
</div>

CSS

/* The top and left properties will have no effect */
.static-offset-ignored {
  position: static;
  top: 50px; /* This property is ignored */
  left: 50px; /* This property is ignored */
  background-color: lightcoral;
}

Explanation: Even though top and left properties are set, the browser ignores them because the element's position is static. The element remains in its default place in the document flow.

Example 3: Z-index Ineffectiveness

HTML

<div class="static-zindex">I'm static.</div>
<div class="another-element">I'm another element.</div>

CSS

/* The z-index property has no effect on static elements */
.static-zindex {
  position: static;
  z-index: 10; /* This property will not work */
  background-color: lightgreen;
}
.another-element {
  background-color: gold;
  margin-top: -20px; /* Overlap for demonstration */
}

Explanation: The z-index property is intended to control the stacking order of positioned elements. Since the first div is static, the z-index value is ignored, and it cannot be brought in front of the overlapping second element.

Example 4: Stacking in Normal Flow

HTML

<div class="static-block">Block 1</div>
<div class="static-block">Block 2</div>

CSS

/* Static elements stack vertically by default */
.static-block {
  position: static;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 5px;
}

Explanation: These div elements are block-level and have position: static. They stack vertically, one after the other, respecting their margins as part of the normal document flow.

Example 5: Inline Elements

HTML

<p>
  This is a sentence with a <span class="static-inline">static span</span> inside it.
</p>

CSS

/* This span remains in its natural inline position */
.static-inline {
  position: static;
  background-color: yellow;
}

Explanation: The span element is an inline element with position: static. It remains in its natural position within the flow of the text inside the paragraph, without any special positioning.

Example 6: No New Stacking Context

HTML

<div class="static-parent">
  <div class="child">Child</div>
</div>

CSS

/* The parent does not create a new stacking context */
.static-parent {
  position: static;
  background-color: #e0e0e0;
}
.child {
  /* This element is positioned relative to the initial containing block, not the parent */
  position: absolute;
  top: 0;
  left: 0;
  background-color: lightpink;
}

Explanation: An element with position: static does not create a new stacking context. Therefore, the absolutely positioned child is not contained by the .static-parent and is instead positioned relative to the initial containing block (usually the <html> element).

Example 7: Inside a Flex Container

HTML

<div class="flex-container">
  <div class="static-flex-item">Item 1</div>
  <div class="static-flex-item">Item 2</div>
</div>

CSS

/* Flexbox controls the layout, but the items themselves are static */
.flex-container {
  display: flex;
}
.static-flex-item {
  position: static;
  background-color: turquoise;
  margin: 5px;
}

Explanation: Even within a flex container, the flex items themselves retain their default position: static. While their layout is controlled by the flexbox rules of the parent, their positioning scheme remains in the normal flow.