Skip to main content
SimilarExport ZIP
100%

Beispiel: Positionierung

✓ Published0🌍 Public
Hhelen.bielawa@web.de
Last edited Apr 16, 2026
Created on Apr 16, 2026

This example demonstrates how HTML elements can be positioned and restyled through JavaScript. A pink background page contains a vertically stacked flexbox layout with a large message box, a button, and a second color block. When the button is clicked, a CSS class toggles the message and button background between navajowhite and darkorange. The core interaction uses the DOM API through `document.querySelector` and `classList.toggle` to dynamically change the visual presentation without any external libraries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Hello World, Felix

This example demonstrates a simple interactive color-changing interface. The page displays two text messages, “Hallo Welt!” and “HALLO!!”, centered on a light-yellow background. Clicking the “Ändere die Farbe” button toggles a `pink` CSS class on both the first message and the button itself, changing their background colors. The implementation uses vanilla JavaScript with `document.querySelector` to select elements and `addEventListener` for the click handler, while the visual styling relies on standard CSS classes and transitions.

Ppasternakfelix@gmail.com
67% match
Loading thumbnail…

Fork of HTML Starter, Hello World

This example demonstrates a simple interactive color-change effect. A large message on a dark red background invites a PayPal donation, while a button labeled "Ändere die Farbe" toggles the background colors of both the message and the button between pink and blue. The interaction is implemented with vanilla JavaScript, using `querySelector` to select the elements and an `addEventListener` for the click handler, with CSS classes controlling the visual state. No external libraries or data sources are used.

Llisa.reck@axelspringer.com
66% match
Loading thumbnail…

SHOW HIDE BLOCK JS

This example demonstrates a simple toggle interaction that switches between showing a red and a blue square using a button labeled “Show Red Box” or “Show Blue Box.” The code uses vanilla JavaScript event handling via an `onclick` attribute and manipulates the CSS `display` property to control visibility. It relies on the DOM API methods `getElementById` and `style.display`, with D3.js loaded for potential visualization extensions, though the core behavior is purely HTML and JavaScript.

Llupica.matthew@gmail.com
66% match
Loading thumbnail…

HTML Starter, Hello World

This example shows a minimal interactive HTML page where a click on a button toggles the background color of a displayed message and the button itself. The page renders a yellow-centered layout with a large green “Hello World” text and a light blue button. The interaction is handled by a JavaScript event listener that toggles CSS classes. It uses the Document Object Model (DOM) API via `querySelector` and `addEventListener`, with no external libraries or data sources.

Hhelen.bielawa@web.de
66% match
Loading thumbnail…

CSS Position property

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.

WWRCIECH
66% match
Loading thumbnail…

Fork of HTML Starter, Hello World

This example demonstrates a simple interactive color-changing interface built with plain HTML, CSS, and JavaScript. It shows a "Hello World" message and a button that, when clicked, toggles a pink background color on both elements through classList.toggle. The page uses the DOM API via document.querySelector to select elements and add an event listener. The styling uses CSS grid to center content and defines a light yellow background with a lightgreen message box.

Mmarc.sarembe@gmail.com
65% match
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
65% match
Loading thumbnail…

css flexbox

This example demonstrates a minimal HTML page that showcases the use of CSS flexbox, indicating a layout container through the `class="layout"` style definition. The page consists of a basic structure with a `<style>` block and a `<div>`, and it uses JavaScript to log a message to the browser console. The rendering approach relies on standard HTML and CSS, with the page centered and set to a large font size, though the flexbox properties themselves are not fully defined in the visible code.

AAnimesh Nautiyal
65% match