logo
Tags down

shadow

div position relative to another div


By : rpurgert
Date : May 03 2020, 06:56 AM

I´m trying to desing a rabbit using css,

but the divs in my main parent div not  moving if I e.g. type "top: 20%"

The parent div is in position "relative" right now. I try differend position attributes.

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

So , I want the rabbit bottom to move.

It's my main background for rabbits lower part. But it just flows to the upper right corner.

How I can fix this :

Answer :

Div use position:absolute if you are to position .rabbit-bottom relative to .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>



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org