布局css和javascript的問題
[英]Problems with layout css and javascript
問題描述
我有以下布局：
在左側我有一個菜單，右側的大灰色部分是身體內容。 問題出在左側菜單上我有一堆按鈕。 我希望這個菜單是固定的位置和身體可滾動。 我有以下css：
#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}
問題是，在菜單的紅色部分，所有按鈕都不可用，我無法點擊它。 看起來像身體覆蓋了菜單。
任何想法可能是什么問題？
謝謝
2 個解決方案
解決方案1
1 2013-10-17 17:22:19
為了將其固定在頂部而不是滾動，你不要使用position: fixed; 。 你需要使用position: absolute; 。 如果你不想要它在最頂層，那么你使用position: relative; 並將其放在元素中。
然后，為了滾動，你使用position: fixed; 。
當您使用position: fixed ，它會將元素固定在可見頁面中 。
但是，當你使用position: absolute ， 無論滾動如何，它都會將它放在頁面上的絕對位置。 例如，如果你添加了css top:0; 然后它將從頁面的絕對頂部開始為0像素，如果向下滾動，它將從視圖中消失，因為它一直在實際頁面的頂部，而不僅僅是可見頁面的頂部。
我明白這對你來說似乎有些違反直覺。 但是，您可以在下面的jsbin中看到它。
工作jsbin：
http://jsbin.com/Uwuyuha/1
page.html中
<body>
<div id="container">
<div id="menu">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<div id="content">
</div>
</div>
</body>
style.css文件
body {
width: 100%;
height: 100%;
}
#container {
width: 1000px;
height: 1000px;
}
#menu {
width: 250px;
height: 2000px;
position: fixed;
background: #999;
}
#content {
width: 650px;
height: 300px;
position: absolute;
margin-left: 251px;
background: #444;
}
解決方案2
1 已采納 2013-10-17 17:23:17
包括html會更好地理解堆疊順序，並可能產生更好的答案。 鑒於你提供了什么，這應該解決：
#menu {
position: fixed;
z-index: 1;
}
CSS布局對齊問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.