子元素沒有采取位置命令

Question

我試圖讓我的#image-square div從#inside-preview頂部9px。我不確定它爲什麼不起作用。我試過將其位置從absolute改爲relative以及topmargin-top，我加了block。我不明白爲什麼它不起作用。

請幫忙。

#outside-preview, #inside-preview { 
 
    border: 1px solid black; 
 
    border-radius: 8px; 
 
    /*display: inline-block;*/ 
 
} 
 
#outside-preview { 
 
    width: 500px; 
 
    height: 600px; 
 
    position: relative; 
 
    border-bottom-left-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
} 
 
#inside-preview { 
 
    width: 440px; 
 
    height: 568px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left:5%; 
 
    bottom: 0; 
 
} 
 
#image-square { 
 
    top: 9x; 
 
    width: 400px; 
 
    height: 174px; 
 
    background: red; 
 
    position: relative; 
 
    display: block; 
 
    z-index: 2; 
 
}

<div> 
 
<div class="container" id="outside-preview"> 
 
    <div class="container" id="inside-preview"> 
 
     <div id="image-square"></div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

嘗試把 9px，而不是9X的開始..

Answer 2

這是否完成你正在嘗試做什麼？

http://codepen.io/anon/pen/RRBprj

它看起來像加margin-top:9px;工作的罰款。

Answer 3

試試這個：

#image-square { 
    margin-top: 9px; 
    width: 400px; 
    height: 174px; 
    background: red; 
    position: relative; 
    z-index: 2; 
}