Question

我刚刚开始使用CSS，并希望了解一些行为。

我在CSS文件中定义了这个：

#spa {
position : absolute;
top      : 8px;
left     : 8px;
bottom   : 8px;
right    : 8px;

min-height : 500px;
min-width  : 500px;
overflow   : hidden;

background-color : #fff;
border-radius    : 0 8px 0 8px;
}

.spa-shell-head {
  top    : 0;
  left   : 0;
  right  : 0;
  height : 40px;
}
.spa-shell-head-logo {
  **top        : 4px;
  left       : 4px;**
  height     : 32px;
  width      : 128px;
  background : orange;
}

.spa-shell-head-acct {
  **top        : 4px;
  right      : 0;**
  width      : 64px;
  height     : 32px;
  background : green;
}

这在我的HTML文件中：

<body>
  <div id="spa">
    <div class="spa-shell-head">
      <div class="spa-shell-head-logo"></div>
      <div class="spa-shell-head-acct"></div>
      <div class="spa-shell-head-search"></div>
    </div>
    <div class="spa-shell-main">
      <div class="spa-shell-main-nav"></div>
      <div class="spa-shell-main-content"></div>
    </div>
    <div class="spa-shell-foot"></div>
    <div class="spa-shell-chat"></div>
    <div class="spa-shell-modal"></div>
  </div>
</body>

为什么我可以将粗体属性更改为任何数字，但元素不会改变？（至少是我为这些元素设置的背景颜色）

可在此处找到完整代码：http://jsfiddle.net/fu6dmhdt/1/

Answer 1

只是因为.spa-shell-head-logo和.spa-shell-head-acct div都没有定位。

CSS top，right，bottom和left（偏移）属性仅适用于非static position ed元素 - 即元素的position不是static（fixed，absolute，relative）。

例如，给他们一个relative的位置来查看效果 - Example 。

Answer 2

Top，Left，Bottom和Right属性取决于位置。当你将位置属性分配给绝对/固定时，它绝对有用。

Answer 3

顶部，左侧，右侧和底部的属性仅在您使用绝对或固定位置声明使用标记的元素的位置时才有效。否则你会想要使用保证金。

作为旁注，尝试将所有css保存在同一个地方对您非常有益。一旦你开始添加更多的CSS，它可能会变得混乱！

希望这会有所帮助。

CSS'top'属性无效

3 个答案: