位置被固定在页面的底角而不是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的底角

回答

相关问题