CSS'top'属性不起作用 [英] 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;
剩下：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;
背景：绿色;
}
以及这个在我的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/
仅仅因为 .spa-shell-head-acct div都没有定位。
CSS top ， right ， bottom 和 left （offset）属性只适用于非 - static position ed元素 - 即元素除静态位置 >（ fixed ，绝对，相对）。例如，给它们一个 relative 的位置来查看效果 - 示例 。
I'm just starting with CSS and would like to understand some behaviors.
I have this defined in a CSS file:
#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;
}
and this in my HTML file:
<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>
Why is it that I can change the bold properties to any number but the elements don't change? (at least the background colour that I have set to those elements)
Full code can be found here: http://jsfiddle.net/fu6dmhdt/1/
Simply because neither .spa-shell-head-logo nor .spa-shell-head-acct divs are positioned.
CSS top, right, bottom and left (offset) properties are only applicable to non-static positioned elements - i.e. elements have a position other than static (fixed, absolute, relative).
For instance, give them a position of relative to see the effect - Example.
这篇关于CSS'top'属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
