點燈坊

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

Using relative for Layout

Sam Xiao's Avatar 2021-12-31

By relative and absolute, we can implement some special layout.

Version

TailwindCSS 3.0

Horizontal Center

layout000

TailwindCSS is centered in the horizontal direction.

<!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="relative">
    <div class="absolute left-1/2 transform -translate-x-1/2">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative">
  • relative : parent element uses relative, child element uses absolute to use this elemenet as base of position

Line 11

<div class="absolute left-1/2 transform -translate-x-1/2">TailwindCSS</div>
  • absolute : child element use absolute position
  • left-1/2 : set the left side of the element to 50%. This is not horizontal center
  • transform -translate-x-1/2 : move the element to the left with the 50% width of the element. This is equivalent to horizontal center

Horizontal Left

layout001

TailwindCSS is on the left side in the horizontal direction.

<!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="relative">
    <div class="absolute left-0">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative">
  • relative : parent element uses relative, child element uses absolute to use this elemenet as base of position

Line 11

<div class="absolute left-0">TailwindCSS</div>
  • absolute：child element use absolute position
  • left-0：set left to 0. This is equivalent to horizontal left

Horizontal Right

layout002

TailwindCSS is on the right side in the horizontal direction.

<!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="relative">
    <div class="absolute right-0">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative">
  • relative : parent element uses relative, child element uses absolute to use this elemenet as base of position

Line 11

<div class="absolute right-0">TailwindCSS</div>
  • absolute : child element use absolute position
  • right-0 : set right to 0. This is equivalent to horizontal right

Vertical Center

layout003

TailwindCSS is centered in the vertical direction.

<!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="relative h-screen">
    <div class="absolute top-1/2 transform -translate-y-1/2">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative h-screen">
  • relative : parent element uses relative, child element uses absolute to use this elemenet as base of position
  • h-screen : set height as the height of the browser

We don’t have to to set width on horizontal center because <div> is default to occupied by the whole row, but height is only as of the content’s height. That’s why we have to set h-screen on vertical center

Line 11

<div class="absolute top-1/2 transform -translate-y-1/2">TailwindCSS</div>
  • absolute：child element use absolute position
  • top-1/2：set top side of the element to 50%, this is not vertical center
  • -translate-y-1/2：move the element to the top with the 50% height of the element. This is equivalent to vertical center

Vertical Top

layout004

TailwindCSS is on the top side in the vertical direction.

<!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="relative h-screen">
    <div class="absolute top-0">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative h-screen">
  • relative：parent element uses relative, child element uses absolute to use this elemenet as base of position
  • h-screen：set height as the height of the browser

Line 11

<div class="absolute top-0">TailwindCSS</div>
  • absolute：child element use absolute position
  • top-0：set top to 0, this is equivalent to vertical top

Vertical Bottom

layout005

TailwindCSS is on the bottom side in the vertical direction.

<!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="relative h-screen">
    <div class="absolute bottom-0">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative h-screen">
  • relative : parent element uses relative, child element uses absolute to use this elemenet as base of position
  • h-screen : set height as the height of the browser

Line 11

<div class="absolute bottom-0">TailwindCSS</div>
  • absolute : child element use absolute position
  • bottom-0 : set bottom to 0. This is equivalent to vertical bottom

Horizontal/Vertical Center

layout006

TailwindCSS is both horizontal center and 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="relative h-screen">
    <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">TailwindCSS</div>
  </div>
</body>
</html>

Line 10

<div class="relative h-screen">
  • relative : parent element uses relative, child element uses absolute to use this elemenet as base of position
  • h-screen : set height as the height of the browser

Line 11

<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">TailwindCSS</div>
  • absolute : child element use absolute position
  • left: 1/2 : set left side of the element to 50%. This is not horizontal center
  • top: 1/2 : set top side of the element to 50%. This is not vertical center
  • transform -translate-x-1/2 : move the element to left with the 50% width of the element. This is equivalent to horizontal center
  • trasform -translate-y-1/2 : move the element to the top with the 50% height of the element. This is equivalent to vertical center

Conclusion

  • When using relative for position, we often use 2 <div> in HTML. Outer <div> is relative and inner <div> is absolute
  • If we just want right, left, top, bottom of the page, we can just simply use right, left, top and bottom with 0 to implement
  • If we want to horizontal center or vertical center, we have to use transform and translate to implement

Reference

TailwindCSS, relative

# TailwindCSS