點燈坊

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

Using fixed for Layout

Sam Xiao's Avatar 2021-12-30

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

Browser will determine the final result by the most strict condition from width, height, top, bottom, height, right, and left

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="fixed left-0 right-0 top-0 bottom-0 w-32 h-32">TailwindCSS</div>
</body>
</html>
  • fixed : use fixed 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 block height

Horizontal Center

layout002

We can also use fixed 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="fixed left-0 right-0 w-32 h-32 m-auto">TailwindCSS</div>
</body>
</html>
  • fixed : use fixed 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 : set block width
  • h-32 : set block height
  • m-auto : make block horizontal center

Vertical Center

layout003

We can also use fixed and m-auto to implement vertical 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="fixed top-0 bottom-0 w-32 h-32 m-auto">TailwindCSS</div>
</body>
</html>
  • fixed : use fixed 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 block width
  • h-32 : set block height
  • m-auto : make block vertical center

Vertical / Horizontal Center

layout004

We can also use fixed 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="fixed top-0 bottom-0 left-0 right-0 w-32 h-32 m-auto">TailwindCSS</div>
</body>
</html>
  • fixed : use fixed 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 fixed 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="fixed top-0 bottom-0 left-0 right-1/2 w-32 h-32 my-0 mx-auto">TailWindCSS</div>
</body>
</html>
  • fixed : use fixed 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="fixed top-0 bottom-1/2 left-0 right-1/2 w-32 h-32 m-auto">TailwindCSS</div>
</body>
</html>
  • fixed : use fixed 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

TailwindCSS, fixed

# TailwindCSS