html - 将 div 移动到位置为 "relative"的 div 不起作用

Question

我正在尝试在 css 中设计一只兔子，但是如果我在主父 div 中的 div 没有移动，例如输入“顶部:20%”

父 div 现在处于“相对”位置。我尝试了不同的位置属性。

.rabbit{
    --rabbit-skin: #965d00;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 500px;
    height: 500px;
    background-color: white;
}

.rabbit-bottom{
    top: 20%;
    left: 20%;
    width: 50%;
    height: 75%;
    background: var(--rabbit-skin);
    border-radius: 50% 50% 40% 40%;
}

所以我想让兔子底部动起来。这是我的兔子下半部分的主要背景。但它只是流到右上角。

Answer 1

如果要相对于 .rabbit 定位 .rabbit-bottom，请使用 position:absolute

.rabbit {
  --rabbit-skin: #965d00;
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 500px;
  height: 500px;
  background-color: white;
}

.rabbit-bottom {
  top: 20%;
  left: 20%;
  width: 50%;
  height: 75%;
  background: var(--rabbit-skin);
  border-radius: 50% 50% 40% 40%;
  position: absolute;
}

<div class="rabbit">
  <div class="rabbit-bottom">
  </div>
</div>