位置被固定在頁面的底角而不是div的底角

我在一年內沒有編碼，所以我有點生疏。我試圖將我的菜單修復到div「包裝器」的右下角，但它修復了屏幕的右下角。位置被固定在頁面的底角而不是div的底角

<div id="wrapper"> 
 

 
<header> 
 

 
<ul id="menu"> 
 
\t <li><a href="index.html">Home</a></li> 
 
\t <li><a href="about.html">About</a></li> 
 
\t <li><a href="faq.html">FAQ</a></li> 
 
\t <li><a href="other.html">Other</a></li> 
 
</ul> 
 

 
</div>

和CSS

#wrapper { 
 
\t width: 1840px; 
 
\t margin: 0px auto; 
 
\t text-align: left; 
 
\t padding: 15px; 
 
\t background-color: #F0E0B2; 
 
\t } 
 

 
#menu, #menu ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t } 
 

 
#menu { 
 
\t position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
\t width: 759px; 
 
\t border-right: 1px solid #C0B38E; 
 
    background-color: #F0E0B2; 
 
\t }

來源

2014-10-01 Thraykon

歡迎OS！那麼，你的問題是什麼？你想達到什麼目的？你能提供更多的問題嗎？ – jazzurro 2014-10-01 01:02:59

如果你看看這裏：http://www.w3schools.com/cssref/pr_class_position.asp，位置是：固定相對於瀏覽器窗口。您需要使用position：absolute，這是相對於最接近的父div的position：relative。我相信你是想與此類似（注意位置：固定在#wrapper指定和位置：絕對的#menu）：

#wrapper { 
    width: 1840px; 
    height: 300px; 
    margin: 0px auto; 
    text-align: left; 
    padding: 15px; 
    background-color: #F0E0B2; 
    position: fixed; 
} 

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#menu { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 759px; 
    border-right: 1px solid #C0B38E; 
    background-color: #F0E0B2; 
}

來源

2014-10-01 01:07:39

這應該這樣做。父容器需要position: relative;，以便孩子可以正確定位。

#wrapper { 
    width: 1840px; 
    margin: 0px auto; 
    text-align: left; 
    padding: 15px; 
    background-color: #F0E0B2; 
    position: relative; 
    } 

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

#menu { 
    position: relative; 
    bottom: 0; 
    right: 0; 
    width: 759px; 
    border-right: 1px solid #C0B38E; 
    background-color: #F0E0B2; 
    }

來源

2014-10-01 01:22:29 EternalHour

我覺得你看起來像這樣。我希望它能幫助你。

DEMO

#wrapper { 
    width:1840px; 
    margin: 0px auto; 
    /*text-align: left;*/ 
    padding:15px; 
    background-color: #F0E0B2; 
    position: relative; 
    } 

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

#menu { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    border-right: 1px solid #C0B38E; 
    background-color:red; 
    } 
ul#menu li{ 
    text-align: right; 
    padding-right: 5px; 
    float: left; 
    }

來源

2014-10-01 06:36:38

位置被固定在頁面的底角而不是div的底角

回答

相關問題