{"id":82,"date":"2024-10-23T06:47:32","date_gmt":"2024-10-23T06:47:32","guid":{"rendered":"https:\/\/techkubo.com\/css\/?p=82"},"modified":"2025-05-12T12:52:03","modified_gmt":"2025-05-12T12:52:03","slug":"css-positioning","status":"publish","type":"post","link":"https:\/\/techkubo.com\/css\/css-positioning\/","title":{"rendered":"CSS Positioning"},"content":{"rendered":"\n

1. Static Positioning (Default)<\/strong><\/h2>\n\n\n\n

By default, all elements have position: static<\/code>. This means they follow the normal flow of the document without any special positioning. Static positioning doesn\u2019t allow you to move elements from their default positions on the page. It simply follows the natural flow of the content.<\/p>\n\n\n\n

div {\n  position: static; \/* default behavior *\/\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
2. Relative Positioning<\/strong><\/h2>\n\n\n\n
When you use position: relative<\/code>, the element stays in the normal document flow, but you can move it relative to its original position using the top<\/code>, bottom<\/code>, left<\/code>, or right<\/code> properties.<\/p>\n\n\n\n
div {\n  position: relative;\n  top: 20px;   \/* Moves the element 20px down *\/\n  left: 15px;  \/* Moves the element 15px to the right *\/\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
3. Absolute Positioning<\/strong><\/h2>\n\n\n\n
With position: absolute<\/code>, the element is removed from the document flow and positioned relative to its nearest positioned ancestor (an element with relative<\/code>, absolute<\/code>, or fixed<\/code> positioning).<\/p>\n\n\n\n
div {\n  position: absolute;\n  top: 30px;\n  right: 10px;\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
4. Fixed Positioning<\/strong><\/h2>\n\n\n\n
An element with position: fixed<\/code> is positioned relative to the viewport (browser window), meaning it stays in the same place even when you scroll.<\/p>\n\n\n\n
div {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
5. Z-Index and Stacking Order<\/strong><\/h2>\n\n\n\n
The z-index<\/code> property controls the stacking order of elements, allowing you to determine which element should appear on top when elements overlap. The higher the z-index<\/code> value, the higher the element\u2019s position in the stack.<\/p>\n\n\n\n
div {\n  position: absolute;\n  z-index: 10;\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
CSS Positioning Example Code<\/strong><\/h2>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
    \n
  • Static<\/strong>: Follows normal document flow.<\/li>\n\n\n\n
  • Relative<\/strong>: Moves relative to its original position but keeps its space in the document.<\/li>\n\n\n\n
  • Absolute<\/strong>: Positioned based on its nearest positioned ancestor.<\/li>\n\n\n\n
  • Fixed<\/strong>: Stays in place even while scrolling.<\/li>\n\n\n\n
  • Z-Index<\/strong>: Controls which element appears on top when they overlap.<\/li>\n<\/ul>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>CSS Positioning Example<\/title>\n  <style>\n    .static-box {\n      position: static;\n      background-color: lightblue;\n      padding: 10px;\n      margin-bottom: 10px;\n      border: 2px solid blue;\n      width: 100%;\n    }\n\n    .relative-box {\n      position: relative;\n      top: 20px;\n      background-color: lightgreen;\n      padding: 10px;\n      margin-bottom: 10px;\n      border: 2px solid green;\n      width: 100%;\n    }\n\n    .absolute-box {\n      position: absolute;\n      top: 150px;\n      left: 20px;\n      background-color: lightcoral;\n      padding: 10px;\n      width: 80%;\n      border: 2px solid red;\n    }\n\n    .fixed-box {\n      position: fixed;\n      bottom: 10px;\n      right: 10px;\n      background-color: lightgray;\n      padding: 10px;\n      width: 200px;\n      border: 2px solid gray;\n    }\n\n    .z-index-high {\n      position: absolute;\n      top: 180px;\n      left: 30px;\n      background-color: yellow;\n      padding: 10px;\n      z-index: 10;\n      border: 2px solid orange;\n    }\n\n    .z-index-low {\n      position: absolute;\n      top: 200px;\n      left: 50px;\n      background-color: pink;\n      padding: 10px;\n      z-index: 1;\n      border: 2px solid purple;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class="static-box">This is a static element (default positioning).<\/div>\n\n  <div class="relative-box">This is a relative element (moved 20px from its original position).<\/div>\n\n  <div class="absolute-box">This is an absolute element (positioned 150px from the top and 20px from the left).<\/div>\n\n  <div class="z-index-high">This is a high z-index (above the pink box).<\/div>\n\n  <div class="z-index-low">This is a lower z-index (below the yellow box).<\/div>\n\n  <div class="fixed-box">This is a fixed element (always stays at the bottom-right corner).<\/div>\n\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    CSS Labs<\/strong><\/h2>\n\n\n\n