在页面CSS上定位元素

Question

我想创建页眉，如下所示：

但我用虚拟css规则获得了什么：

我主要是后端开发人员，但我想深入研究CSS和HTML，这是我的Html struct，这是我的Css rules，所以有人可以向我解释我需要如何放置那些元素以适当的方式。谢谢！

Answer 1

您可以将您的旗帜绝对放置，并设置顶部，左侧，右侧，底部属性。绝对定位元素将从自然文档流中删除，您可以通过设置左，上，右，底属性将它们对齐到任意位置

示例

<div class="box">

    <div class="inner-box">
    <p>dummy content</p>
    </div>

</div>

的CSS

.box {
    position: relative;
}

.inner-box {
    position: absolute;
    top: 20px;
    left: 50px;
}

Answer 2

margin: 20px auto; 

调整边距也可以帮助你定位，第二个值对于中心事物非常有帮助。