點燈坊

失くすものさえない今が強くなるチャンスよ

absolute Overview

Sam Xiao's Avatar 2022-01-01

We can set the position to the element by absolute, regardless of the actual HTML position.

Version

TailwindCSS 3.0

static

overview000

A, B, C is displayed by the actual 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>
  • HTML element is static by default
  • We can’t set position to static, only by HTML position

absolute

overview001

B and C overlap regardless of the actual 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 class="absolute">B</div>
  <div>C</div>
</body>
</html>

Line 10

<div>A</div>
<div class="absolute">B</div>
<div>C</div>
  • absolute : B with absolute. B creates a new layer and C uses the original space for B. That’s why B and C overlap

absolute with Position

overview002

B is displayed using the specified location.

<!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="absolute right-0 top-0">B</div>
  <div>C</div>
</body>
</html>

Line 10

<div>A</div>
<div class="absolute right-0 top-0">B</div>
<div>C</div>
  • absolute : use absolute position
  • right-0 : set position to the right with 0
  • top-0 : set position to the top with 0

Nested div

overview003

There are 3 nested <div> to display A, B and C.

<!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 class="ml-10">B
      <div class="ml-10">C</div>
    </div>
  </div>
</body>
</html>

Line 10

<div>A
  <div class="ml-10">B
    <div class="ml-10">C</div>
  </div>
</div>
  • ml-10 : set left margin to make visual effect of nested <div>

absolute with Position

overview004

C is positioned beside A.

<!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 class="ml-10">B
      <div class="ml-10 absolute left-10 top-0">C</div>
    </div>
  </div>
</body>
</html>

Line 10

<div>A
  <div class="ml-10">B
    <div class="ml-10 absolute left-10 top-0">C</div>
  </div>
</div>
  • ml-10 : set left margin to make visual effect of nested <div>
  • absolute : use absolute position
  • left-10 : set position to the left with 0
  • top-0 : set position to the top with 0

absolute with relative

overview005

<!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 class="ml-10 relative">B
      <div class="ml-10 absolute left-10 top-0">C</div>
    </div>
  </div>
</body>
</html>

Line 10

<div>A
  <div class="ml-10 relative">B
    <div class="ml-10 absolute left-10 top-0">C</div>
  </div>
</div>
  • ml-10 : set left margin to make visual effect of nested <div>
  • relative : set absolute position based on this element
  • absolute : use absolute position
  • left-10 : set position to the left with 0
  • top-0 : set position to the top with 0

Conclusion

  • We can specify the location on absolute based on <body> or relative regardless of the actual HTML position

# TailwindCSS