Saya mencoba mendesain kelinci di css, tetapi div di div induk utama saya tidak bergerak jika saya mis. ketik "atas: 20%"

Div induk berada di posisi "relatif" sekarang. Saya mencoba atribut posisi yang berbeda.

.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%;
}

Jadi saya ingin bagian bawah kelinci bergerak. Ini adalah latar belakang utama saya untuk kelinci bagian bawah. Tapi itu hanya mengalir ke sudut kanan atas.

0
Jarlo 9 Agustus 2019, 04:14

1 menjawab

Jawaban Terbaik

Gunakan position:absolute jika Anda ingin memposisikan .rabbit-bottom relatif terhadap .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>
0
Nidhin Joseph 9 Agustus 2019, 01:22