CSS position 絕對和全寬問題

Question

我有 2 個 div 和一個 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 更改為具有全屏寬度而不更改換行和 header。 但是當我嘗試時：

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

導航獲得 100% 的包裝器，最大寬度為 1003 像素。 我希望它在不改變包裝和 header div 的情況下伸展到最大。

這可能嗎？

Answer 1

您可以將left和right屬性都設置為0 。 這將使 div 拉伸到文檔寬度，但要求不定位父元素（事實並非如此，因為#header是position: relative; ）

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

演示在： http://jsfiddle.net/xWnq2/ ，我刪除position:relative; 來自#header

Answer 2

您需要添加position:relative到 #wrap 元素。

當你添加這個時，所有子元素都將定位在這個元素中，而不是瀏覽器 window。

Answer 3

我也有類似的情況。 就我而言，它沒有 position:relative 的父級。 只需將我的解決方案粘貼到此處以供可能需要的人使用。

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

Answer 4

將以下 CSS 添加到父div對我有用

position: relative;
max-width: 100%

Answer 5

使#site_nav_global_primary定位為固定並將寬度設置為 100 % 和所需的高度。

Answer 6

這個答案應該可以解決您的問題。 如果父 div 需要具有相對定位，那么寬度為 100% 的子元素（具有絕對定位）將按預期工作。

https://stackoverflow.com/a/58242149/11679888

Answer 7

為什么你希望它比它的容器更寬？ 對我來說，如果你不希望它受到它們的約束，你似乎應該把 dl 放在包含的 div 之外。

Answer 8

這個也有效。 使用此方法，無需干擾父 div 的定位。 我檢查過

#site_nav_global_primary {    
  position: absolute;
  width: 100vw;
}

Answer 9

我不知道這是否是您想要的，但嘗試刪除 overflow: hidden from #wrap