Question

我正在努力使用CSS。我有一个简单的幻灯片放映，我希望我的徽标在它上面。

这是我的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容器上设置的浮动。

尝试将#grafic选择器更新为以下内容：

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

这会强制#grafic移动到#logo以下。

这是一篇关于理解CSS Float如何工作的好文章（很老但仍然相关）。 http://css-tricks.com/all-about-floats/

Answer 2

你必须使用

position: absolute;

为了使一个元素“飘”＆＃34;在另一个之上。在徽标上添加位置标记。

参考资料：http://www.w3schools.com/cssref/pr_pos_z-index.asp

标题图片上方的标志（幻灯片放映）

2 个答案: