如何阻止2個div重疊？

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;
}

如果您不想更改fixed的#header位置

Answer 4

它的發生是由於position:fixed #header如果您不想更改它，只需添加以下CSS

#header{
  top:0px;
}
#list{ 
    margin-top:100px;(height of your header + gap between both divs)
}

如何阻止2個div重疊？

問題描述

4 個解決方案

解決方案1
1 2014-05-26 06:52:26

解決方案2
0 2014-05-26 06:41:42

解決方案3
0 2014-05-26 06:42:32

解決方案4
0 已采納 2014-05-26 06:47:49

如何阻止2個div重疊？

問題描述

4 個解決方案

解決方案1 1 2014-05-26 06:52:26

解決方案2 0 2014-05-26 06:41:42

解決方案3 0 2014-05-26 06:42:32

解決方案4 0 已采納 2014-05-26 06:47:49

解決方案1
1 2014-05-26 06:52:26

解決方案2
0 2014-05-26 06:41:42

解決方案3
0 2014-05-26 06:42:32

解決方案4
0 已采納 2014-05-26 06:47:49