Html 中心div内绝对div_Html_Css

Html 中心div内绝对div

html css

Html 中心div内绝对div,html,css,Html,Css,查看此链接…：在这个网站上我有这个代码 <body> <div id="geral"> <div id="animacao"> <ul id="banners"> <li><img src="banners/banner_1.jpg" alt="Banner 1" /></li> <l

查看此链接…：

在这个网站上我有这个代码

    <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>

我错在哪里

删除

左侧：50%

并添加

边距：0自动

到

#菜单

div

#menu{
    position: relative;
    margin: 0 auto;
    width:271px;
    height:530px;
    background-color:#FFF;
    z-index: 10;
}

试试这个：

我将#菜单放在#animacao中，因为位置是相对于其父对象的。

并增加了左边的边距来调整位置。

这就是你想要做的吗

还是你想把“菜单”部分放在“动画”的顶部

html

不知道你想问什么，但试试这个：

HTML:

确实如此，但这种方式将能够在#动画中使用图像的转换？我会这样用：为什么不呢？这里的问题是，你必须准确地展示你正在努力实现的目标，这样我们才能给你一个更好的答案。我已经更新了我的问题。。看看我做的例子。。。但是“黄色”的部分不在中间…抱歉混淆了…黄色部分一定在红色部分的上方。。。这将包含一个带有菜单的透明图像…@Preston，请更新您的原始问题以更好地解释您的要求。黄色部分必须在红色部分之上。。。这将包含一个带有菜单的透明图像…我已更新我的问题。。看看我做的例子。。。但是“黄色”div不在中间……我已经更新了我的JSFIDLE来显示这一点。看起来上面已经贴出了一个很好的答案。比如：在红色区域，我有背景转换的

图像…在红色区域有列表吗？单击列表项时，黄色区域的内容是否会更改？这是你想说的吗？我已经更新了我的问题。。看这个。。请。。。。关于你的最后一个问题。。不yello区域接收菜单链接。。。。和标志…只有。。。

#menu{
    position: relative;
    margin: 0 auto;
    width:271px;
    height:530px;
    background-color:#FFF;
    z-index: 10;
}

<div id="geral">
    <div id="animacao">
        <div id="menu">

        <div>
    </div>       
</div>

#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;
}

<div id="geral">
<div id="animacao">fdgdf</div>
</div>
<div id="geral">   
<div id="menu">dfgdf     </div> 
</div>

@charset "utf-8";
/* CSS Document */

#geral{
    width:990px;
    margin-left:auto;
    margin-right:auto;

    background: #99CCCC;
}

#animacao{

    float:left;
    width:100%;
    height:530px;
    background:#FFCCCC;
}

#menu{
    margin-left:auto;
    margin-right:auto;
    width:271px;
    height:530px;
    background-color:#FFF;
    z-index: 10;
    border:#000000 1px solid;
    display:table;
}