子元素不采取位置命令

Question

我试图将#image-square div从#inside-preview顶部变为9px。我不确定为什么它不起作用。我尝试将其位置从absolute更改为relative以及top margin-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

这是否能达到您的目的？

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

看起来添加margin-top:9px;工作正常。

Answer 2

试试这个：

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

Answer 3

尝试推杆 9px而不是9x开始..