嵌套格造型偏移

我有一個位置設置爲固定的div容器。當我嘗試在div標籤內添加內容時，內容從標籤的底部開始，而不是在頂部。嵌套格造型偏移

#toolbox{ 
    width: 300px; 
    height: 400px; 
    position: fixed; 
    top: 250px; 
    background-color: grey; 
    z-index: 1; 
} 
#secondary{ 
    position: relative; 
    margin: 0px; 
    padding:0px; 
    height: 10px; 
    width:10px; 
}

我的HTML看起來像

<div id="toolbox"> 
    <span id="secondary">Test</span> 
</div>

文本 '測試' 來對工具箱的底部。如果我添加多個元素，如單選按鈕或另一個div標籤（並在工具箱中將溢出設置爲自動），這些元素在工具箱本身內形成一個大頁面。

添加源代碼：

<html> 
<head> 
    <title>Crisper</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <link href="styles.css" rel="stylesheet" /> 
</head> 

<body onload="start()"> 
    <header> 
     <h1>Test Util</h1> 

     <input type="file" name="file" id="file" class="inputfile" /> 
    </header> 
    <hr> 

    <div id="dropbox"> 
     <div id="toolbox"> 
      <span id="secondary">Res</span> 
     </div> 
     <img id="canvas" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" > 
    </div> 

    <hr> 
    <footer> 
     <button id="download-butotn">Download</button> 
    </footer> 
</body>

CSS：

#dropbox { 
    min-height: 70%; 
    text-align: center; 
} 

img{ 
    min-height: 500px; 
    min-width: 500px; 
    position: relative; 
    margin: auto auto auto auto; 
} 

#toolbox{ 
    width: 300px; 
    height: 400px; 
    position: fixed; 
    top: 250px; 
    background-color: grey; 
    z-index: 1; 

} 

#secondary{ 
    position: absolute; 
    height: 100px; 
}