Problem der absoluten vollen Breite der CSS-Position

Ich habe 2 Divs und ein DL:

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

und das ist mein Stil:

#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}

#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}

#site_nav_global_primary {    
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}

Jetzt möchte ich site_nav_global_primary so ändern, dass es eine volle Bildschirmbreite hat, ohne den Wrap und den Header zu ändern. aber wenn ich es versuche:

#site_nav_global_primary {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

Die Navigation erhält 100% des Wrappers, was einer maximalen Breite von 1003 Pixel entspricht. Ich möchte, dass es sich maximal ausdehnt, ohne die Wrap- und Header-Divs zu ändern.

Ist das möglich?

Sie können sowohl leftals auch rightproperty auf setzen 0. Dadurch wird das div auf die Dokumentbreite ausgedehnt, es muss jedoch kein übergeordnetes Element positioniert werden (was unter den gegebenen Umständen nicht der Fall #headerist position: relative;).

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo an: http://jsfiddle.net/xWnq2/ , wo ich entfernt position:relative;von#header

Sie müssen das position:relativeElement #wrap hinzufügen .

Wenn Sie dies hinzufügen, werden alle untergeordneten Elemente in diesem Element und nicht im Browserfenster positioniert.

Ich habe eine ähnliche Situation. In meinem Fall hat es keinen Elternteil mit Position: relativ. Fügen Sie hier einfach meine Lösung für diejenigen ein, die sie möglicherweise benötigen.

position: fixed;
left: 0;
right: 0;

#site_nav_global_primaryStellen Sie die Position als fest ein und stellen Sie die Breite auf 100% und die gewünschte Höhe ein.

Ich weiß nicht, ob dies das ist, was Sie wollen, aber versuchen Sie, den Überlauf zu entfernen: versteckt vor #wrap