Jak mogę stwierdzić, że bezwzględna pozycja jest ignorowana to względna pozycja rodzica?

Question

Jest to kod: http://jsfiddle.net/noamway/r8vMp/8/

<div id="website" style="width:100%;"> 
    <div id="layoutAll" style="width:200px;margin:0 auto"> 
     <div id="layout" style="width:100%;position:relative;"> 
      <div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;"> 
      Hello world 
      </div> 
     </div> 
    </div> 
</div> 

I to mi się podoba "full_strip" będzie w 100% z całej szerokości strony. Z powodu krewnego jest rodzicem, nie mogę tego zrobić. Nie mogę usunąć żadnego ustawienia od rodziców, więc potrzebuję pochwały lub czegoś, co podpowie mu, aby zignorować, jest względnym rodzicem.

Dzięki, Noam

Answer 1

Usuń width:200px dla div id #layout. Ważne jest, aby nie używać tego samego identyfikatora dla dwóch elementów. Zduplikowane identyfikatory są niebezpieczne.

KOD:

<div id="website" style="width:100%;"> 
    <div id="layout" style="margin:0 auto"> 
     <div id="layout" style="width:100%;position:relative;"> 
      <div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;"> 
      Hello world 
      </div> 
     </div> 
    </div> 
</div> 

DEMO FIDDLE

Answer 2

Aby zbudować na odpowiedź Bezimiennego, jeśli chcesz, aby tekst pozostają skupione można dodać text-align: center; do najgłębiej zagnieżdżonego div.

Kod:

<div id="website" style="width:100%;"> 
    <div id="layoutAll" style="margin:0 auto"> 
     <div id="layout" style="width:100%;position:relative;"> 
      <div id="full_strip" style="width:100%;background-  
      color:black;color:white;height:100px;position:absolute;left:0; text-align:  
      center;"> 
        Hello world 
      </div> 
     </div> 
    </div> 
</div> 

JSfiddle

Answer 3

Zasadniczo poprosić odnoszące bezwzględne położenie Div który jest dynamicznie generowane wewnątrz względnym położeniu div ciała zamiast do jego względnej rodzica Div.

Pozycja względna i bezwzględna są zawsze związane z pierwszym głównym elementem macierzystym, który ma pozycję bezwzględną lub względną. To dlatego niemożliwe jest zrobienie tego, o co prosisz.

Jedynym rozwiązaniem dla Ciebie jest umieszczenie elementu div "full_strip" poza położeniem względnym elementu macierzystego i znacznikiem body.