CSS Position property

100%

CSS Position property

✓ Published1🌍 Public

Last edited Jan 31, 2023

Created on Jan 31, 2023

This example demonstrates the CSS Position property by rendering four labeled boxes—Absolute, Relative, Fixed, and Sticky—inside nested container divs. It uses plain HTML and CSS (via the `style.css` file) with the `position` values (`absolute`, `relative`, `fixed`, `sticky`) to control placement relative to viewport and containing blocks. The visualization relies on explicit `top`, `left`, and `z-index` values, plus a tall body height (`min-height: 200vh`) to reveal sticky and fixed behavior during scrolling. No external JavaScript libraries are involved.

AI-generated description

https://youtu.be/OXGznpKZ_sA?t=12868

MIT Licensed

Similar vizzes

Loading thumbnail…

CSS Position Property + Button

This example demonstrates the CSS `position` property through a single-page scrolling layout with three full-screen sections. It shows how `position: sticky` keeps colored headers pinned to the top while scrolling, and `position: fixed` anchors a navigation footer and a social button to the viewport. The page uses only HTML and CSS, with anchor links (`<a href="#one">`) enabling smooth scrolling via `scroll-behavior: smooth`. Color-coded headers (blue, red, green) visually separate the sections, while a fixed navigation bar and button remain persistently visible.

WWRCIECH

75% match

Loading thumbnail…

CSS grid...

This example demonstrates a simple CSS grid layout, showing four numbered boxes arranged in a two-column structure with additional space for a third column and second row. The boxes are styled with a grey background, centered text, and rounded borders. The grid uses explicit track sizes, including fixed pixel widths and an auto-sized column, with a gap between items. The stylesheet also includes global body resets and red, semi-transparent circles, though no circles appear in the markup. The code relies only on HTML and CSS, without any JavaScript libraries.

QQuvee

65% match

Loading thumbnail…

Flexible background positioning

This example demonstrates how to position a background image with precise offsets from the edges of a container using the CSS `calc()` function. The code sets a fixed background position of `calc(100% - 20px)` horizontally and `calc(100% - 10px)` vertically, ensuring the image stays 20 pixels from the right and 10 pixels from the bottom regardless of container size. A placeholder SVG image from `csssecrets.io` is applied as the background, with the text "Code Pirate" rendered inside the styled `div`. The example uses only standard CSS properties and no external JavaScript libraries.

AAlexZ33

64% match

Loading thumbnail…

stacking context

This example demonstrates how CSS stacking contexts determine the paint order of overlapping positioned elements. Three colored squares—red, green, and blue—are absolutely positioned within separate parent divs, yet their visual layering follows the order of the divs in the DOM. The code uses plain CSS positioning (top/left offsets) and background colors, with no JavaScript or external libraries. A commented-out universal selector block shows a debugging technique for visualizing layout boxes, but the active CSS keeps the example minimal. The illustration clarifies that without explicit z-index, later siblings paint above earlier ones, as seen in the stacked arrangement.

EEE2dev

64% match

Loading thumbnail…

Fork of CSS Flexbox 2

This example demonstrates CSS Flexbox layout behavior using two numbered boxes inside a bordered container. The `style.css` file applies `display: flex` with `justify-content: center`, `align-items: center`, and `flex-flow: row nowrap` to center items both horizontally and vertically, while the second box uses an `order: -1` property to reverse its visual position. Custom flex properties (`flex: 1 1 40%` and `flex: 2 2 40%`) control relative sizing and growth, with `gap: 1rem` adding spacing between items. The HTML structure includes commented-out boxes 3–6, leaving only two visible elements rendered in black with white text.

WWRCIECH

63% match

Loading thumbnail…

CSS Display

This example contrasts default block-level paragraph styling with an inline-block span by using the CSS `display` property. The page shows how inline-block elements respect vertical margins and padding, while the surrounding paragraphs remain gray blocks. Rendering relies on HTML structure and the linked Roboto font from Google Fonts, with all visual behavior defined in the included stylesheet. No JavaScript or external visualization libraries are used; the example is purely static.

WWRCIECH

63% match

Loading thumbnail…

CSS Flexbox

A CSS Flexbox layout demonstrates responsive box arrangement using the Flexbox model. Six numbered black boxes with white text are centered within a bordered container, wrapping onto multiple lines with a one-rem gap between them. The code uses `display: flex`, `justify-content`, `align-items`, `flex-flow`, and `align-content` properties to control alignment and wrapping. It imports the Roboto font from Google Fonts and applies a plain HTML structure with no JavaScript or external data sources.

WWRCIECH

63% match

Loading thumbnail…

Gist 31d1125ec64ede7d29fc4d096250e64a

A CSS flexbox playground demonstrates how container properties and per-item order values rearrange a set of nine colored boxes. The code uses flexbox layout APIs such as `display:flex`, `justify-content`, `align-items`, `align-content`, and `align-self` to control horizontal and vertical spacing, wrapping, and individual item alignment. It also highlights the `order` property with negative and high positive integers to change visual sequence, and includes commented-out alternatives like `space-around` and `center` to show variations. The example is written entirely in plain CSS within a flexbox.css file.

LLayne Smith

62% match