tags, and ensure all links are valid. The existing code examples use blocks with HTML entities escaped, so I should follow that. Including a hero section with a wave effect and next module link. The next module after positioning might be flexbox or grid, so perhaps link to /tutorials/htmlcss/layout.html. I should structure the content into sections explaining each positioning type with examples. Use the same design elements as other tutorials, such as cards, code blocks, and hover effects. Make sure the HTML is valid, with proper closures and scripts at the end. Check for prohibited content, but positioning examples shouldn't have issues. Use consistent classes and styles from existing files, like .wave for gradient text and .code-example for code blocks. Maybe add a note on use cases for each positioning type. Finally, ensure the file has the same header and footer as other tutorials, with navigation links and a hero section. Make sure all links are correct and the next module link is to the layout tutorial. CSS Positioning - Shipwrecked

CSS Positioning

Master layout control with CSS positioning techniques.

Next Module: Layout

Positioning Elements

Position Values

  • Static: Default position. Not affected by top/right/left/bottom.
  • Relative: Positioned relative to its normal position.
  • Absolute: Positioned relative to the nearest positioned ancestor.
  • Fixed: Positioned relative to the viewport (stays fixed when scrolling).
  • Sticky: Mix of relative and fixed. Sticks to position when scrolled to threshold.

Example: Relative & Absolute

This box is absolutely positioned within its relatively positioned container. 

<div class="position-example">
  <p style="position: absolute; top: 20px; left: 20px;">...</p>
</div>