Question

我希望较小的div位于较大的红色div下方，但我无法弄明白。我认为显示块css会将较小的div放在较大的div下面，但这似乎不起作用。

我无法发布图片。这是一个链接http://s1.postimg.org/pzgvqi8y7/Capture1.jpg

这是html

<!DOCTYPE html>
<html>
    <head>
        <title>Select Ye Favorite</title>
        <link rel='stylesheet' type='text/css' href='css/list.css'/>
        <link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
        <!--jquery and jquery UI scripts here -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <!--js pdf stuff -->
        <!-- <script type="text/javascript" src="jspdf.js"></script>    -->
        <script type="text/javascript" src="dist/jspdf.debug.js"></script>
        <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="jjspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> 
        <!-- photo selection scripts-->
        <script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
        <!--my scripts-->
        <script type='text/javascript' src='js/list.js'></script>
    </head>
    <body>
        <div id='header'><h1 id='titleSite'>List Life</h1></div>
        <div id='list'></div>
    </body>
</html>

这是css

![html, body
{
    height: 100%;
}
/*
* {
    border: 2px solid black;
}*/
#header{
   /* z-index:1;
    border-radius:5px;
    background-color:#ECF7C6;
    height:60px;
    position:fixed;
    margin-top:-20px;*/
    z-index: 0;
    position: fixed;
    width: 98.75%;
    margin-top: -2%;
    margin-bottom:0.5%;
    margin-left:0.25%;
    margin-right:0.25%;
    height: 100px;

    border: 2px dashed black;
    background-color:#FC3F4D;
    border-radius:5px;
}
div{height: 50px;
    width: 100px;
    border: 2px solid black;
    border-radius: 5px;
    margin:auto;
    display:block;
    position:relative;

}
div  #titleSite{
    position:relative;
    top:10%;
    color:white;
    text-align:center;
    font-family:Arial,sans-serif;
    font-weight:bold;
    border: 2px dashed white;
}][2]

Answer 1

试试这个：

#titleSite{
    position:relative;
    top:10%;
    color:white;
    text-align:center;
    font-family:Arial,sans-serif;
    font-weight:bold;
    border: 2px dashed white;
}
#list{ position: relate; top:90px;}

Answer 2

我不太确定你要实现的目标，因为你的css样式不是太直接。问题很简单，您的标题div指定了fixed位置。固定定位元素从文档流中取出并相对于浏览器窗口呈现，因此列表div将被“推”向前，因为它不知道标题div

要解决此问题，请删除以下css声明...

position: fixed;

来自标题div的

Answer 3

<强> HTML

<div id='header'><h1 id='titleSite'>List Life</h1></div>
<div id='list'></div>

<强> CSS

添加此

#list{ 
    margin-top:60px;
}

如果您不想更改#header职位fixed

Answer 4

它的发生是因为position:fixed的{{1}}如果你不想改变它，只需添加以下css

#header

如何阻止2个div重叠？

4 个答案: