布局没有设置。如何将div放在主div之上

Question

我想设置类似的布局

我认为我必须设置这样的东西

表示主div，在主div的顶部，我有其他div。我用过这样的东西

<div id="headerImage" >

        <div id="help_About">               
            <a href="#">Help</a>
            <a href="#">About</a>                                           
        </div>

        <div id="myLogout">               
            <input type="text" value="Basit" />
            <a href="#">Logout</a>                                                          
        </div>

        <div id="myImage">
            <img width="20" height="20" src="resources/images/tools_icon.png" /> 
        </div>

        <img src="resources/images/2b.jpg"/>

    </div>

    #headerImage{ 
        border-style :solid;
        border-width: thin;
        width: 100%;
        height: 20%;           
        background: url(${imgUrl}/2b.jpg) no-repeat top left;            
        padding: 0px;
        border-top: 0px;
        border-bottom: 5px #eeeeee solid;
        z-index: 1;
    }

    #headerImage #help_About{ 
        margin-left: 10%
        margin-top: 2%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

    #headerImage #myLogout{ 
        margin-left: 30%
        margin-top: 4%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

    #headerImage #myImage{ 
        margin-right: 10%
        margin-top: 4%;
        display: inline-block;
        border-style :solid;
        border-width: thin;                                 
        padding: 2px;
        border-top: 2px;
        z-index: 2;
    }

我刚给出了边框样式，宽度和高度，以实现外观。但后来我得到了这样的东西

我做错了什么？我如何设置我的div的布局？

由于

Answer 1

试试这个 - http://jsfiddle.net/SQwFK/

HTML

<header>
    <div id="left"></div>

    <div id="rightTop"></div>
    <div id="rightBottom"></div>
</header>

CSS

    header {
    background: url(http://lorempixel.com/600/300);
    height: 300px;
    width: 600px;
    position: relative;
}

#left {
    position: absolute;
    top: 100px;
    left: 50px;
    background: #ffe;
    height: 100px;
    width: 250px;
}

#rightTop, #rightBottom {
    position: absolute;
    right: 50px;
    top: 25px;
    background: #fef;
    height: 100px;
    width: 100px;
}

#rightBottom {
    top: 175px;
}

新编辑 -------------------------------------------------- --------------------------

工作

<div id="headerImage" >
....
</div>
<div id="menuBodyContainer" >
    <div id="menu">
    </div>
    <div id="myBody">
    </div>  
</div>

现在我尝试使用像

这样的代码

  #headerImage{ 
        position: absolute;
        border-style :solid;
        border-width: thin;
        width: 100%;
        height: 20%;           
        background: url(${imgUrl}/2b.jpg) no-repeat top left;            
        padding: 0px;
        border-top: 0px;
        border-bottom: 5px #eeeeee solid;
        z-index: 1;            
    }

    #headerImage #help_About{ 
        position: absolute;
        display: inline-block;
        top: 4%;
        left: 4%;
        opacity:0.4;
        z-index: 2;            
    }

    #headerImage #myLogout{ 
        position: absolute;
        display: inline-block;
        right: 50px;
        top: 25px;
        z-index: 2;           
    }

    #headerImage #myImage{
        position: absolute;
        top: 2%;
        right: 2%;
        z-index: 2;           
    }

这很有效。

但我现在有另一个问题。如您所见，我设置了#help_About and #myLogout {display:inline-block}。但是#help_About制造了一个大广场。我也想要白色方块不显示。似乎div中的元素实际上在图像上。对于#myLogout也是如此。我将显示设置为inlne-block，但它们出现在两条不同的行上，我想要内联，并且它显示白色方块作为背景我不想要它。我该怎么做？如果我设置透明度，那么它设置整个div的透明度，包括元素而不仅仅是div。 tThanks

现在是什么？

Answer 2

你需要绝对定位你的div。然后使用top，left，right或bottom属性将div对齐到所需的位置。

您设置为背景的图像也会在图片标记中使用，这可能是标题图片加倍的原因。

<强>更新

将父div（在您的情况下为#headerImage）设置为position:relative;，并且应为所有子div设置position:absolute;

Answer 3

您需要创建带有波形图像背景的标题div。然后放置所有内部控件：

HTML

<div id="header">
    <ul>
        <li><a href="#">Home</a><li>        
        <li><a href="#">Help</a><li>
    </ul>
    <a class="logo" href="#"></a>
    <a class="logout">Logout</a>
</div>​

CSS

body { font-family: Verdana; }
#header { height:100px; background: url('http://dl.dropbox.com/u/18372729/header-bg.png')}
#header ul { top:23px; left:270px; position:absolute; }
#header ul li { display:inline; }
#header ul li a { color:#fff; text-transform:uppercase; text-decoration:none; margin:20px; font-size:10pt; font-weight:bold; }
#header ul li a:hover { text-decoration:underline; }
#header .logo { position:absolute; top:20px; right:200px; background:url('http://dl.dropbox.com/u/18372729/logo.png'); width:217px; height:75px; display:block; position:absolute; }
#header .logout { font-size:9pt; float:right; margin-top:80px; margin-right:20px; }​

演示：http://jsfiddle.net/xsDQP/1/