如何阻止我的背景div与我的菜单div重叠？

我的页面左侧有一个菜单，剩下的页面上有内容。我有一个黑暗，带纹理的背景，所以我想为leftmenu div设置一个半透明的背景，为content div设置一个半透明的背景。但是，似乎body div与菜单div重叠并堆叠其透明度，并且也使菜单div的内容透明。如何阻止我的背景div与我的菜单div重叠？

我宁愿在两部分之间留出空间。有人可以看看我的代码并提供建议吗？

我有一些代码列在下面，但看看jsfiddle获取完整的图片。

http://jsfiddle.net/5xmze/（注意，该链接应该是相同的颜色作为标题）

CSS：

#body{ 
padding-left:2px; 
width: 85%; 
position: relative; 
background-color:rgba(0,0,0,0.6); 
} 

#leftside { 
float: left; 
width: 15%; 
height: 100%; 
}

HTML：

<div><span id="leftside"> 
    <ul class="leftmenu"> 
     <li class="leftmenu"><a href="index.php">Home</a></li> 
     <li class="leftmenu"><a href="projects.php">Projects</a></li> 
     <li class="leftmenu"><a href="resume.php">Resume</a></li> 
     <li class="leftmenu"><a href="contact.php">Contact</a></li> 
    </ul></span> 
</div> 
<div id="body"> 
Content here... 
</div>

这里就是我试图做到： This is what I'm trying to accomplish

来源

2012-12-15 Kenny Johnson

把菜单和身体放到同一个div中，然后将身体浮起来。确保为身体和菜单设置宽度，否则身体会进入菜单下。 – kennypu

靠近。当我将身体浮起时，它会进入菜单。左侧宽度为15％，身体宽度为85％。 –

自填充以来，您无法完全使用15％和85％。尝试改变身体到80％，它应该工作。 – kennypu

最好的办法是把菜单和身体放到同一个父div，然后float:left;身体，所以它显示在菜单旁边。

不要忘记为两个元素设置宽度，因为如果#body的宽度比页面上可用的空间大，它将显示在菜单下。

来源

2012-12-15 04:15:15 kennypu

这是我最终选择的解决方案。我还在leftmenu和body之间添加了另一个div，以在两个div之间添加空格。我做了这个div 15px，并没有添加背景。结果非常好。 –

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(window).resize(function() { 
var s = $("body").width(); 
$("body").css({ "min-width":s+"px" }); 
}); 
}); 
</script> 
<style> 
/* style.css */ 

body { 
font-size: 1em; 
background-image:url('http://i1358.photobucket.com/albums/q764/kenny_johnson5/blackorchid_zpsc8d78a87.png'); 
color:#FFF; 
font-family:Arial; 
width:85%; 
margin-left:16%; 
} 

h1 { 
font-family:Cambria,Serif; 
color:#81E500; 
text-align:center; 
} 

#top{ 
width: 85%; 
position: relative; 
} 

#body{ 
padding-left:90px; 
width: 85%; 
position: relative; 
background-color:rgba(0,0,0,0.6); 
} 

a { 
color:#81E500; 
font-family:Cambria,Serif; 
font-size:1.5em; 
} 

#leftside { 
float: left; 
width: 15%; 
height: 100%; 
    margin-left:-15%; 
    z-index:999; 
} 

ul.leftmenu { 
list-style-type:none; 
margin:0px; 
padding:1px; 
background-color:rgba(0,0,0,0.6); 
border: 1px solid; 
border-color:#000; 
height:100%; 
} 

li.leftmenu { 
padding:5px; 

} 
</style> 
<html> 

<div><div id="leftside"> 
    <ul class="leftmenu"> 
     <li class="leftmenu"><a href="index.php">Home</a></li> 
     <li class="leftmenu"><a href="projects.php">Projects</a></li> 
     <li class="leftmenu"><a href="resume.php">Resume</a></li> 
     <li class="leftmenu"><a href="contact.php">Contact</a></li> 
    </ul></div> 
</div> 



<div id="body"> 
<div id="top"> 
<h1>Header</h1> 
</div> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt erat sit amet dolor imperdiet dignissim. Nunc eu enim erat. Suspendisse commodo faucibus risus at facilisis. Phasellus tortor urna, fringilla sed blandit non, porta vel enim. Vivamus placerat, risus et molestie elementum, risus elit dignissim elit, non porttitor nisl tortor sed lorem. Maecenas scelerisque mattis massa, vel blandit erat blandit sed. Vivamus erat augue, varius ac aliquet non, commodo id massa. Maecenas sit amet est posuere turpis ultrices aliquam. Nulla feugiat ultrices diam vitae egestas. Phasellus risus augue, dapibus nec condimentum non, tempus eu massa. Etiam sodales sodales dolor eu convallis. 
</p> 
<p> 
Aenean in dignissim metus. Suspendisse placerat pharetra justo, et tristique neque vestibulum non. Quisque malesuada scelerisque diam eget suscipit. Donec non sollicitudin justo. Etiam sit amet massa felis. Maecenas aliquet cursus tristique. Etiam sollicitudin augue in risus venenatis rhoncus. Pellentesque tellus diam, porttitor in dapibus eu, rutrum eu lectus. Vestibulum luctus hendrerit augue vitae interdum. Donec in turpis malesuada arcu tempor placerat. Aliquam eget nisl ipsum. Cras blandit elementum vulputate. Ut vulputate ullamcorper urna, quis congue mauris laoreet nec. Morbi vitae dui eros. 
</p> 
<p> 
Phasellus rhoncus ultrices sem et dictum. Ut ut nisl eget eros porttitor commodo auctor vitae leo. Quisque sed nulla augue, vel venenatis augue. Pellentesque bibendum sodales lectus, quis malesuada risus consectetur a. Aliquam lobortis aliquet vulputate. Duis sed velit est, in venenatis est. Vivamus viverra lacinia sapien non sodales. Aenean eleifend quam diam, id gravida tellus. Praesent dui sem, volutpat eu blandit in, volutpat ornare nulla. Nunc sed eros dolor. 
</p> 
<p> 
Quisque sit amet diam nisl, volutpat interdum arcu. Proin et justo lorem. Mauris vitae egestas lacus. Nullam ut laoreet turpis. Donec eget metus enim, id porta orci. Nam condimentum feugiat tempor. Nunc ultricies pellentesque euismod. In hac habitasse platea dictumst. Etiam fringilla bibendum sapien, eu vestibulum nisi imperdiet tempus. Duis tincidunt magna id sapien porta vel aliquam massa tincidunt. Maecenas ut metus id augue congue scelerisque id nec enim. Ut ac nibh est, et laoreet orci. Nulla fermentum laoreet augue, in vulputate risus varius vel. Sed ac nunc quis tortor scelerisque rutrum. 
</p> 
<p> 
Nullam adipiscing ultricies lacus ac pretium. In hac habitasse platea dictumst. Nullam convallis libero non augue sollicitudin mattis. Nunc commodo pharetra magna, tempor sagittis sem vehicula nec. Quisque massa ligula, gravida nec fringilla quis, tempus vel dolor. Nam et sem bibendum mi consectetur tincidunt. Nam placerat venenatis odio sit amet imperdiet. Integer luctus quam quis quam lobortis aliquam. Cras dignissim semper erat, ac laoreet leo volutpat quis. </p> 

</div> 
</body> 
</html>

来源

2012-12-15 03:33:48

检查它的工作，我没有测试它！ –

它有jQuery代码。我宁愿不使用jQuery来做一件这样的事情。如果我打算在网站上使用jQuery来实现其他功能，那么我不会在意。但是，我只是在寻找一个干净，简单的CSS解决方案。谢谢你的努力。 –

男子jquery只是保持宽度调整大小，因为你已经给出了85％的身体宽度，这是在百分比单位，所以调整身体的宽度将有所不同。所以，为了防止它，我添加了jquery！ –

如何阻止我的背景div与我的菜单div重叠？

回答

相关问题