Css nie dziala pozycjonowanie do dołu

W html mam:

        <div id="myDiv" class="rect">
            <div class="rect_elem rect_elem_long"></div>
            <div class="rect_elem rect_elem_small"></div>
            <div class="rect_elem rect_elem_middle"></div>

            <div class="centerBtn"></div>

        </div>

w css chce zeby child (class="centerBtn") bazowego diva ( id="myDiv") pozycjonowal sie powiedzmy 5% od dolnej krawdedzi bazowego diva.
Robie tak jak wyczytalem na 999 poradach czyli css:

  #myDiv{
      width: 30%;
      height: 250px;
      background: black;
      border: 1px solid green; 
      animation: pulse 1s infinite ease-in-out;
  }

  .centerBtn{
      width: 10%;
      height: 6%;
      background: rgba(220,220,220,1);
      margin: auto;
      position: absolute;
      bottom: 2%;
  }

Wynik jest taki ze centerBtn jest na dole ale ale calej strony internetowej a nie diva rodzica. Co z tym jest nie tak?

  #myDiv{
      (...)
      position:relative;
  }

Dziala :):) Tylko teraz z kolei nie jest na srodku tylko po lewej stronie o co w tym chodzi...

kurcze nie kumam tego pozycjonowania. Pisze w node.js teraz kaza mi pisac w js i css ale ten css jakis dziwny...
Jak dla mnie jesli jakis element jest dzieckiem wyzszego to powinien sie pozycjonowac domyslnie w stosunku do niego chyba ze chcemy wyjatek ale wtedy powinno móc sie podac element, do ktorego chcemy pozycjonowac i tyle a tu jakies czary mary....

Jak robisz pozycjonowanie absolutne to musisz zawsze określić pozycje od któregoś z boków i od góry lub od dołu. Pozycjonowanie absolutne jest absolutne bo m.in zrywa z typową zasadą rodzica.

  #myDiv{
      position: relative;
      width: 30%;
      height: 250px;
      background: black;
      animation: pulse 1s infinite ease-in-out;
      border:1px solid green;      
  }

  .centerBtn{
      position: absolute;
      width: 10%;
      height: 6%;
      bottom: 2%;
      left:45%;      
      background: rgba(220,220,220,1);
      border:1px solid red;
  }

Pozycjonowanie absolute liczone jest względem najbliższego w hierarchii kontenera z pozycjonowaniem innym niż static (domyślne). Jeśli brak takiego kontenera, to względem całej strony.

aaaaa tak to dziala dzieki :)
Ja poszukalem i zrobilem tak:

  .centerBtn{
      width: 30%;
      height: 18%;
      background: rgba(220,220,220,1);
      margin: auto;
      left: 0;
      right: 0;**
      position: absolute;
      bottom: 8%;
  }

Kumam zasade tylko później wychodzą kwiatki które sa dla mnie ze soba sprzeczne np. na jednej ze stron wyczytalem ze zeby wsio bylo wycentrowane wzgledem rodzica trza zrobic:

Ewidentnie sama właściwość ‘left’ nie wystarczy. Trzeba jeszcze zastosować pewną sztuczkę.

Do elementu wewnętrznego dodajemy ujemny lewy margines, którego wartość wynosi dokładnie połowę szerokości tego elementu. Skoro mamy szerokość 40% > to trzeba dodać margines lewy równy 20%. (pamiętając o znaku minus). Czyli ostatecznie wygląda to tak:

.wewn { background: #009870; width: 40%; height: 200px; position: absolute; left: 50%; margin-left: -20%; }

...... i wtedy jest wysrodkowane... left 50% margin-left 20% a jest na srodku bo width jest 40% ja pie$%^le ;-)
We flashu wpisywales polozenie na osi x i y i zalatwione... Jak chciales zeby wystawalo z rodzica to dawales x wiekszy niz szerokosc rodzica i wystawalo...

Kumam zasade tylko później wychodzą kwiatki które sa dla mnie ze soba sprzeczne np. na jednej ze stron wyczytalem ze zeby wsio bylo wycentrowane wzgledem rodzica trza zrobic:

Tzn, co jest dla ciebie sprzeczne?

Podany przez ciebie przykład jest jednym ze sposobów na wycentrowanie w poziomie elementu pozycjonowanego absolutnie, chociaż w tym konkretnym przypadku IMHO trochę przecudowanym. Wystarczy:

.wew { background: #009870; width: 40%; height: 200px; position: absolute; left: 30%; border:1px solid green;}

No dla mnie left: 0 i right: 0 powinno wygenerowac blad poniewaz na logike statyczny obiekt nie moze byc jednoczesnie po lewej stronie i prawej stronie ;)

@goku21:

No dla mnie left: 0 i right: 0 powinno wygenerowac blad poniewaz na logike statyczny obiekt nie moze byc jednoczesnie po lewej stronie i prawej stronie ;)

Może, jeżeli wypełnia sobą całą przestrzeń kontenera. Left i right to nie są współrzędne obiektu, tylko współrzędne jego krawędzi.