看到此链接...:为例
在这个网站上我有这个代码
<body>
<div id="geral">
<div id="animacao">
<ul id="banners">
<li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
<li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
</ul>
</div>
<div id="menu">
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
#geral 位于屏幕的中心 -
#animacao具有相同的大小#geral,在此具有淡入淡出效果的动画图像..
#menu有271px,需要保持在中心,#geral并#animacao在此我将把菜单与PNG bakcground ....
这是我的CSS,可能不起作用......
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background: url(../imagens/fundo.jpg) no-repeat;
}
#animacao{
position: relative;
width:990px;
height:530px;
}
#menu
{
position: absolute;
left: 50%;
width:271px;
height:530px;
margin-left:-135px;
background-color:yellow;
z-index: 10;
}
Run Code Online (Sandbox Code Playgroud)
我哪里错了?
这是你想要做的吗?http://jsfiddle.net/brettdewoody/C4jSS/
或者您是否希望#menu div位于#animacao之上?
HTML
<div id="geral">
<div id="animacao">
<div id="menu">
<div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background-color: black;
}
#animacao{
position: relative;
width:990px;
height:530px;
background-color: red;
}
#menu{
position: relative;
margin:0 auto;
width:271px;
height:530px;
background-color:yellow;
z-index: 10;
}
Run Code Online (Sandbox Code Playgroud)