文章 margin-top 影响侧边栏 margin-top

Question

我不希望他们处于同一水平。他们都是独立的divs。侧边栏是固定的。为什么侧边栏不贴在顶部而不是与文章对齐div？

body{
    margin: 0;
    padding: 0;
}

div#sidebar{
    background-color: yellow;
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    width: 200px;
    position: fixed;
}

div#article{
    background-color: blue;
    margin-left: 200px;
    margin-top: 50px;
    height: 500px;
}

HTML :

<div id="sidebar">
    sidebar
</div>
<div id="article">
    article
</div>

Answer 1

试试这个技巧：top:-0px;。不知道，但出于某种原因有效！

body{
    margin: 0;
    padding: 0;
}

div#sidebar{
    background-color: yellow;
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    width: 200px;
    position: fixed;
    top:-0px; /* <-- right here */
}

div#article{
    background-color: blue;
    margin-left: 200px;
    margin-top: 50px;
    height: 500px;
}

<div id="sidebar">
    sidebar
</div>
<div id="article">
    article
</div>

文章 margin-top 影响侧边栏 margin-top

Article margin-top affecting sidebar margin-top

html

css