DEV Community

Vinoth Kumar
Vinoth Kumar

Posted on

POSITIONING

POSITIONING IN CSS:
To control the placement of elements on a web page. It allows elements to be positioned relative to the normal document flow, the browser window, or other elements.

  • The position property defines how an element is positioned.
  • Common position values include static, relative, absolute, fixed, and sticky.
  • Positioning works with properties like top, right, bottom, and left.
  • It helps create flexible layouts, overlays, and responsive designs.

TYPES OF POSITIONING:

  1. Static Positioning.
  2. Relative Positioning.
  3. Absolute Positioning.
  4. Fixed Positioning.
  5. Sticky Positioning.

STATIC:
The default position of an element. It does not accept properties like top, left, right, or bottom.

EXAMPLE:

<html>
<head>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

RELATIVE:
An element relative to its normal position. You can move it using top, left, right, or bottom.

EXAMPLE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
    <style>

        div {
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }

        .relative {
            position: relative;
            top: 20px;
            left: 30px;
        }
    </style>
<head>
  <meta charset="UTF-8">
  <h1> WORK</h1>
  <title>Link CSS Example</title>
  <link rel="stylesheet" href="style.css">
  <div>Box 1</div>
  <div class="relative">Box 2</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)