static Overview | 點燈坊

static is the default utility for position. That’s why we seldom use static in a practical project.

Version

TailwindCSS 3.0

Flow

overview000

A, B, C are displayed by HTML position.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</body>
</html>

Line 10

<div>A</div>
<div>B</div>
<div>C</div>

Normal HTML is displayed by HTML positon.

static

overview000

B is static, but it’s no different from flow layout.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <div>A</div>
  <div class="static">B</div>
  <div>C</div>
</body>
</html>

Line 10

<div>A</div>
<div class="static">B</div>
<div>C</div>

static : use static position

Since every element is static by default, we don’t have to use static for position

Conclusion

We can’t add top, bottom, left or right to specify the location for static. This is the main difference between static and absolute, relative, fixed, sticky

Reference

TailwindCSS, static