DIVY nie chca się na siebie nałożyć

Witam,

jestem początkującym programistą - właściwie pragnę poznać tylko podstawy aby w miarę umieć w tym operować ponieważ staje się to co raz cześciej wymagane wśród grafików. Do nauki wybrałem swój projekt portfolio - mam już zrobioną praktycznie całość, jednak problem pojawia się przy formularzu kontaktowym (screen layoutu poniżej). Ciemny trapez powinien nachodzić na żółte tło, ale jak widać na drugim screenie - nie bardzo mi to wychodzi. Kombinowałem, kombinowałem, ale niestety nic z tego nie wyszło. Będę wdzięczny za pomoc i z góry dziękuje.

http://images.tinypic.pl/i/00635/jmxsilofbd69.jpg
http://oi59.tinypic.com/14kkx9w.jpg

   
    <div id="formularz">
    <section id="trapez"></section>
    <section id="yellowcontactbox"></section>
    </div> 

     #yellowcontactbox
    {
    width: auto;
    height: 550px;
    background-color: #ffe13b;
    position: relative;
    z-index: 1;
    }
    #trapez
    {
    height: 0;
    width: auto;
    border-bottom: 631px solid #2d2d2d;
    border-right: 15px solid #2d2d2d;
    border-left: 500px solid transparent;
    margin-right: 0 auto;
    margin: 4% 0 0 0%;
    margin-left: 35%;
    position: relative;
    z-index: 2;
    }

Pozycjonowanie relatywne position: relative; oznacza jedynie, że będziesz zmieniał pozycję danego obiektu względem pozycji spoczynkowej (bez nadania nowego miejsca). Innymi słowy, samym position: relative; nic nie zmieniasz. Dla #yellowcontactbox daj position: relative; bottom: 550px, gdzie to "550" to wysokość prostokąta. Wtedy według mnie powinny się nałożyć.

relative to w zasadzie to samo co domyślny static, różni się tym, że to nie static ;) wyznacza jednak bazę do pozycjonowania elementów znajdujących się wewnątrz, w przeciwnym wypadku (static) elementy są pozycjonowane w ramach window

<div id="formularz">
    <section id="yellowcontactbox">
      <section id="trapez"></section>
  </section>
</div> 

#yellowcontactbox {
  width: auto;
  height: 550px;
  background-color: #ffe13b;
  position: relative;
  z-index: 1;
}
#trapez {
  height: 0;
  width: auto;
  border-bottom: 631px solid #2d2d2d;
  border-right: 15px solid #2d2d2d;
  border-left: 500px solid transparent;
  margin-right: 0 auto;
  margin: 4% 0 0 0%;
  margin-left: 35%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

http://jsbin.com/xipovutiru/1/edit?css,output

z-index służy do czegoś innego - im wyższa wartość tym dany element jest bliżej do użytkownika np. pierwsza książka na stosie na najwyższą wartość z-index, ta na spodzie ma najniższą. Możesz przy pomocy tego zmieniać dostęp czy widoczność zachodzących na siebie elementów

Dzięki wielkie za pomoc. Wszystko działa. :)

Jeszcze jedno pytanie. Jak w jednym znaczniku ustawić dwie różne wersje czcionek?

"Jesteś zainteresowanymi naszymi usługami" to latomedium natomiast "Skontaktuj się" latoblack.

Obejmij teksty, które mają mieć tą samą czcionkę znacznikiem "span" i później go styluj.

<div>
      <span>czcionka 1</span> 
       <span>czcionka 2</span>
</div>

div span:first-child {font-family: 'czcionka 1';}
div span:last-child {font-family: 'czcionka 2';}