點燈坊

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

Using absolute for Layout

Sam Xiao's Avatar 2021-12-30

By absolute with top, bottom, left, right, and m-auto, we can implement some special layout.

Version

TailwindCSS 3.0

Top / Right

layout000

The red box is located in the top right corner.

<!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 class="absolute top-0 right-0 w-32 h-32">TailwindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • top-0 : set coordinate from top
  • right-0 : set coordinate from right
  • w-32 : set block width
  • h-32 : set block height

Browser adjusts the strictest condition from width, height, top, bottom, right and left to display.

All Zero

layout001

The coordinates of top, bottom, left, and right conflict. Browser determines the final result is top left.

<!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 class="absolute top-0 bottom-0 left-0 right-0 w-32 h-32">TailWindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • top-0 bottom-0 left-0 right-0 : because top, bottom, left and right are both 0, the space is full of browser. Browser determines the final result is top left by default
  • w-32 : set block width
  • h-32 : set box height

Horizontal Center

layout002

We can also use absolute and m-auto to implement horizontal center.

<!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 class="absolute left-0 right-0 w-32 h-32 m-auto ">TailwindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • left-0 right-0 : since we want to use m-auto for horizontal center, we have to adjust horizontal space for m-auto. left-0 right-0 makes entire horizontal space for browser
  • w-32 : 設定 box width
  • h-32 : 設定 box height
  • m-auto : make block horizontal center

Vertical Center

layout003

We can also use absolute and m-auto to implement vertical and horizontal center.

<!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 class="absolute top-0 bottom-0 w-32 h-32 m-auto">TailWindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • top-0 bottom-0 : since we want to use m-auto for vertical center, we have to adjust vertical space for m-auto. top-0 bottom-0 makes entire vertical space for browser
  • w-32 : set box width
  • h-32 : set box height
  • m-auto : make block vertical center

Vertical / Horizontal Center

layout004

We can also use absolute and m-auto to implement vertical and horizontal center.

<!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 class="absolute top-0 bottom-0 left-0 right-0 m-auto w-32 h-32">TailWindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • top-0 bottom-0 left-0 right-0 : since we want to use m-auto for horizontal and vertical center, we have to adjust horizontal and vertical space for m-auto. top-0 bottom-0 left-0 right-0 makes entire space for browser
  • w-32 : set block width
  • h-32 : set block height
  • m-auto : make block vertical and horizontal center

Horizontal 1/4 and Vertical Top

layout005

We can also use absolute and m-auto to implement horizontal 1/4 and vertical top.

<!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 class="absolute top-0 bottom-0 left-0 right-1/2 my-0 mx-auto w-32 h-32">TailwindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • top-0 bottom-0 : make entire vertical space
  • left-0 right-1/2 : make 1/2 horizontal space
  • w-32 : set block width
  • h-32 : set block height
  • my-0 : make block vertical top
  • mx-auto : make block horizontal center

Horizontal 1/4 and Vertical 1/4

layout006

We can also use fixed and m-auto to implement horizontal 1/4 and vertical 1/4.

<!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 class="absolute top-0 bottom-1/2 left-0 right-1/2 w-32 h-32 m-auto">TailwindCSS</div>
</body>
</html>
  • absolute : use absolute position
  • top-0 bottom-1/2 : make 1/2 vertical space
  • left-0 right-1/2 : make 1/2 horizontal space
  • w-32 : set block width
  • h-32 : set block height
  • m-auto : make horizontal 1/4 and vertical 1/4 center

Conclusion

  • top, bottom, left, and left is not only for position. We can also use them to make space for m-auto
  • As for layout, fixed and absolute are identical

Reference

Reference

Tailwind CSS, absolute

# TailwindCSS