🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS Position

Control exactly where elements appear. Master Static, Relative, Absolute, Fixed, and Sticky positioning.

style.css
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolute
layout.css
1 / 8
🧭

Tutor:The 'position' property specifies the type of positioning method used for an element. The default value is 'static'.


Positioning Tree

Unlock nodes by mastering Static, Relative, Absolute, and Fixed positioning.

Concept 1: Static Positioning

static is the default behavior. Elements are positioned according to the normal flow of the page. Properties like top, bottom, left, right, and z-index have no effect.

System Check

Does top: 50px affect a static element?

Community Layouts

Share Your Overlays

Built a cool modal or tooltip using absolute positioning? Share your snippet.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Positioning

Author

Pascual Vila

Frontend Instructor.

The position property is the key to advanced CSS layouts. It allows you to take elements out of the normal document flow and place them precisely where you want them, overlay content, or pin items to the screen.

Positioning Types

  • Static: The default. Elements appear in the order they are in the HTML.
  • Relative: Positioned relative to its normal position. Does not affect surrounding elements' layout.
  • Absolute: Removed from the flow. Positioned relative to the nearest positioned ancestor (non-static).
  • Fixed: Removed from the flow. Positioned relative to the browser window (viewport).
  • Sticky: A hybrid. Acts relative until a scroll threshold is met, then becomes fixed.

The Coordinate Properties

Once an element is positioned (anything other than static), you can use top, right, bottom, and left to move it. These properties also accept negative values.

Z-Index and Stacking

When elements overlap, z-index determines the stack order. An element with a higher z-index covers one with a lower z-index. Note that z-index only works on positioned elements.

CSS Positioning Glossary

Document Flow
The normal arrangement of elements on a page (block elements stack vertically, inline elements flow horizontally).
Viewport
The user's visible area of a web page. Fixed elements are anchored here.
Positioned Ancestor
The nearest parent element that has a position value other than static. Absolute elements look for this to know where to position themselves.
Z-Index
A CSS property that controls the vertical stacking order of elements that overlap.