當使用相對定位時，設置元素的寬度比父級更寬

我有一個元素（在我的情況下是一個HR標籤），它需要與瀏覽器一樣寬，但也比父容器寬。但是，它仍然需要保持相對定位，以便與頁面垂直滾動。問題是，我的父div也必須有相對定位（由於其他佈局正在工作）。當使用相對定位時，設置元素的寬度比父級更寬

我已經能夠解決這個問題的唯一方法是將HR標籤的寬度設置爲3000px，左側位置爲-1000px。這可以工作，但它會在頁面上添加一個水平滾動條（顯示3000px的寬度）。有沒有什麼辦法可以乾淨地完成（沒有水平滾動條）？你可以在http://jsfiddle.net/UGwst/看到我的小提琴。

這裏的HTML：

<div id="layout-wrapper"> 
    <p>Above Content</p> 
    <div id="content-wrapper"> 
    <p>Top Content Here</p> 
    <hr class="rule" /> 
    <p>Bottom Content Here</p> 
    </div> 
</div>

這裏的CSS：

#content-wrapper { 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 8px; 
    background-color: #ddd; 
    position: relative; 
} 
.rule { 
    background-color: #dbb328; 
    height: 5px; 
    position: relative; 
    left: -1000px; 
    width: 3000px; 
}

我認識到，有幾個類似於其他問題here，但不太似乎解決這個問題問題。

來源

2012-11-02 bigmac

父母上使用position:relative。

在HR上使用position:absolute，這樣人力資源就會綁定到父級，並且會隨着它一起滾動。

要隱藏滾動條，請在外包裝上使用overflow:hidden或BODY。

來源

2012-11-02 20:57:29

我一直希望有一個更優雅的解決方案（溢出屬性對我來說似乎很難理解），但它確實有效，所以謝謝你提供的信息。 – bigmac

嘗試

body {overflow-x: hidden;}

消除水平滾動條。根據這個答案，它甚至可以在IE6中工作 - CSS - Only Horizontal Overflow?

來源

2012-11-02 20:57:00

既然你們都是同時發佈的，我不得不拋棄一個答案的答案來接受，但是謝謝你提供的信息。 – bigmac

當使用相對定位時，設置元素的寬度比父級更寬

回答

相關問題