Question

这是我的代码：

<div id="container">
    <div id="header">
        <img src="https://cdn3.iconfinder.com/data/icons/simplius-pack/512/list1-128.png" id="img-header"></img>
         <h3 id="header-title">this is just a title</h3>

    </div>
</div>

这就是风格：

#container {
    background-color:#e6e6e6;
    width:100%;
    height:400px;
}
#header {
    position:absolute;
    top:0;
    background-color:#ffffff;
    height:10%;
    width:100%;
}
#img-header {
    width:5%;
    height:70%;
}
#header-title {
    width:90%;
    position:absolute;
    top:0;
}

但是标题标题位于img。

之下

由于header-title的位置为：absolute和top：0，我认为它应该从图像开始启动。

为什么会发生这种情况以及如何将其定位于顶部？

Answer 1

用户代理的默认样式表为h3提供了上边距;你需要把它归零（或者改用另一个元素）。

Answer 2

如果你需要的话，我已经为你制作了一个jsfiddle：http://jsfiddle.net/2dvcam8f/12/

我刚刚更改margin-top的{{1}}，因为#header-title默认设置了它（你可以在Element Inspector中看到它）

为什么这个元素的位置绝对位于其容器顶部并且顶部为0？

2 个答案: