JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  /* 父级元素开启 relative 定位 */
  position: relative;
  height: 400px;
  width: 600px;
  margin: 0 auto;
  background-color: black;
}

.child {
  /* 子元素开启  absolute 定位 */
  position: absolute;
  background-color: red;
  height: 200px;
  width: 300px;
  /* 子元素的 top left right bottom 会被限制在 父级容器中 */
  right: 0;
  bottom: 0;
}