Question

我正在尝试在CSS中设计一只兔子，但是如果我举个例子，我主要父母div中的div不会动。输入“顶部：20％”

父div现在位于“相对”位置。我尝试了differendposition属性。

.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

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

.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>

将div中的div移到“相对”位置不起作用

1 个答案: