CSS'top'property has no effect

我刚刚开始使用CSS，并想了解一些行为。CSS'top'property has no effect

在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/

来源

2014-09-26 martinap

这些类的元素没有绝对定位，所以添加顶部和右侧不会改变任何东西。我不确定你对背景的评论意味着什么。 – 2014-09-26 17:46:53

至少您需要添加绝对位置或相对位置或固定位置，以便顶部或底部或左侧或右侧影响 – 2014-09-26 17:55:12

很简单，因为既不.spa-shell-head-logo也不.spa-shell-head-acct div的定位。

top CSS，right，bottom和left（偏移）属性仅适用于非staticposition ED元素 - 即元件具有position以外static（fixed，absolute，relative）。

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

来源

2014-09-26 17:47:14

oK，我正在关注教科书。不知道为什么他们有这些属性，如果他们没有效果。 – martinap 2014-09-27 01:35:48

顶部，左侧，底部和右侧属性取决于位置。当您将位置属性分配给绝对/固定时，它绝对有效。

来源

2014-09-26 17:50:11

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

作为一个便笺，它将是非常有利的你尝试和保持所有的CSS在同一个地方。一旦你开始添加更多的CSS，它可能会变得混乱！

希望这有助于。

来源

2014-09-26 18:15:20

CSS'top'property has no effect

回答

相关问题