html - 标题图片上方的 Logo (幻灯片放映)

Question

我正在为 CSS 而苦苦挣扎。我有一个简单的幻灯片放映，我希望我的 Logo 位于其上方。

这是我的 html:

<div id="header">
        <div id="logo"></div>
        <div id="grafic">
            <img id="bild" src="">
        </div>
    </div>

和我的 CSS:

#header {
width: 100%;
height: 350px;
/*background-image: url(../pics/header.png);*/
}

#logo {
height: 320px;
background-image: url(../pics/jobber_logo.png);
background-repeat: no-repeat;
background-position:50px 45px;
float: left;
z-index: 10;    
}

#grafic {
z-index: 1;
}

#bild {
width: 100%;
height: 100%;
}

这是一个用于理解的链接:header

我有点糊涂了!!

Answer 1

不完全确定您在这里请求的是什么，但这里是一个快速的猜测。

您的#grafic 容器需要清除您在#logo 容器上设置的 float 。

尝试将您的#grafic 选择器更新为以下内容:

#grafic {
    clear: left;
    z-index: 1;
}

这将强制#grafic 移动到您的#logo 下方。

这是一篇关于理解 CSS Float 工作原理的好文章(非常古老但仍然相关)。 http://css-tricks.com/all-about-floats/