Question

我有一个div包含一个宽度为100％的图像，我想把我所有的其他内容（将在内容div中的所有内容）放在它下面。这是我目前的代码：

98.214.131.200/index.php

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
    <li><a href="http://tri-peoria.org">Home</a></li>
    <li><a href="/forum">Forum</a></li>
    <li><a href="/join">Join</a></li>
    <li><a href="/members">Members</a></li>
    <li><a href="/events">Events</a></li>
    <li><a href="/training">Training</a></li>
    <li><a href="https://www.facebook.com/groups/tripeoria/">Facebook</a></li>
    <ab><a href="/about">Peoria Triathlon Club</a></ab>
</ul>
<ul id="quote">
<p>"random quote"</p>
</ul>
<div id="bg"><img src="bg.jpg" width="100%" alt=""</img></div>
<div id="content">
<p>content</p>
</div>
</body>
</html>

98.214.131.200/style.css

body {
    background-color: #000000;
    color: #C1C1C1;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
}
#bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    }
#content {
    position:relative;
    color: #FFF;
    }
#nav {
    z-index:1;
    position:relative;
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; }
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #c00;
    border-right: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    background-color: #fff; }
#nav ab {
    float: right; }
#nav ab a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #c00;
    border-right: 1px solid #ccc; }
#nav ab a:hover {
    color: #c00;
    background-color: #fff; }
#quote{
    z-index:1;
    position:relative;
}
#quote p {
    color: #000;
    width: 350px;
}

您可以访问http：// 98.214.131.200查看我当前的代码。

Answer 1

您应该将#nav和#quote元素嵌入div或header标记并绝对定位。然后，您可以相对定位图像容器，这将推迟后续内容。

HTML：

<div id="header">
    <ul id="nav"></ul>
    <ul id="quote></ul>
</div>

CSS：

div#header{
    position: absolute;
}
#bg{
    position: relative;
}

Answer 2

要放置背景图片，请使用以下css属性

背景图像：网址（ 'yourimage.jpg'）;

Answer 3

从<p>中取出<ul>，并将其（{1}} #content）放在<p>内。然后重温你的定位声明...

绝对定位元素取决于具有相对定位的父容器。因此，#bg应为#bg position:relative #quote。通过使用position:absolute作为引号和内容的父级 - 您可以保留与您尝试关注的那个元素相关的所有内容。

建立一个小提琴（使用您的IP地址为图像）。 http://jsfiddle.net/bqXc6/

这是主旨：

#bg

请注意：在小提琴中，我使用隐藏在其父级上的溢出来清理你的'float：left'导航元素的代码（只是为了推开高度/宽度），因此它的背景色是可见的。 / p>

Answer 4

您可以使用display：block css属性使其显示在自己的行上。只需将该属性添加到css样式表中的#bg即可。

将div定位在另一个下方

4 个答案: