html - 在页面 CSS 上定位元素

Question

我想创建页眉如下:

但是我的虚拟 css 规则得到了什么:

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

Answer 1

您可以将标志放置在absolutely 并设置top、left、right、bottom 属性。绝对定位元素已从自然文档流中移除，您可以通过设置它们的左、上、右、下属性将它们对齐到任何您想要的位置

示例

<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;
}