Абсолютная проблема ширины позиции CSS

У меня есть 2 divs и dl:

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

и это мой стиль:

#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;
}

Теперь я хочу изменить site_nav_global_primary, чтобы иметь полную ширину экрана без изменение обертки и заголовка. но когда я пытаюсь:

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

Навигационная система получает 100% обертки шириной не более 1003 пикселей. я хочу, чтобы он растягивайтесь до максимума, не меняя обертывания и заголовки заголовков.

Возможно ли это?

Ответ 1

Вы можете установить для свойства left и right значение 0. Это заставит div растягиваться до ширины документа, но не требует, чтобы ни один родительский элемент не был помещен (это не так, вид как #header is position: relative;)

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

Демо на: http://jsfiddle.net/xWnq2/, где я удалил position:relative; из #header

Ответ 2

Вам нужно добавить элемент position:relative в #wrap.

Когда вы добавите это, все дочерние элементы будут помещены в этот элемент, а не в окно браузера.

Ответ 3

У меня похожая ситуация. В моем случае у него нет родителя с позицией: относительный. Просто вставьте мое решение здесь для тех, кто может понадобиться.

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

Ответ 4

Почему вы хотите, чтобы он был шире, чем контейнер? Для меня кажется, что вы должны взять dl за пределами содержащихся divs, если вы не хотите, чтобы он был связан их ограничениями.

Ответ 5

Я не знаю, нужно ли это, но вы хотите удалить переполнение: скрыто от #wrap

Ответ 6

Сделайте #site_nav_global_primary позиционированным как фиксированное и установите ширину до 100% и желаемую высоту.

Ответ 7

Этот ответ должен решить вашу проблему. Если родительский элемент div должен иметь относительное позиционирование, тогда дочерний элемент (с абсолютным позиционированием) с шириной 100% будет работать как положено.

fooobar.com/info/1210727/...