html - 布局未设置。如何将 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 也是如此。我将 display 设置为 inlne-block 但它们出现在两条不同的行上，我想要然后 inline 并且它显示白色正方形作为背景我不想要它。我该怎么做？如果我设置透明度，那么它会设置整个 div 的透明度，包括元素而不仅仅是 div。谢谢

怎么办 ？

Answer 2

您需要使用波形图像的背景创建标题 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/

Answer 3

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

您设置为背景的图像也被用于图像标签中，这可能是您的标题图像加倍的原因。

更新

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