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

回答

相關問題