Div 固定位置总是堆叠在第二个 div

Question

在我的 Index.cshtml（ASP.Net 核心 MVC）中，我有以下代码：

@{
    ViewData["Title"] = "Home Page";
}

<div class="text_center">


    <div id="header_parent">
            RESUME INFORMATION
    </div>

    <div class="container containerClass">
        <div class="row">

            <div class="col-md-6 green-box">
                <div class="personal">

                    <fieldset>
                        <legend class="personal-information">Personal Information</legend>

                        <div class="personal-name">Name: Daniel Kamel</div>
                        <div class="personal-email">Email: kameldaniel@hotmail.com</div>
                        <div class="personal-address">address: Zouk Mickael</div>

                    </fieldset>

                </div>
            </div>

            <div class="col-md-6 red-box">
                <div class="education">
                    <fieldset>
                        <legend class="education-education">Education</legend>

                        <label class="education-college">ESIB from 2015 to 2020</label>
                    </fieldset>

                </div>
            </div>

        </div>
    </div>

</div>

我的 site.css 文件包含以下片段：

#header_parent {
    position: fixed;
    background-color:aqua;
    margin-left: 0px;
    margin-right: 0px;
    height:50px;
    margin-top: 0px;
}

.containerClass{
    margin-top: 100px;
}

.green-box{
    background-color: green;
}

.red-box{
    background-color: red;
}

.personal-information {
    font-size:35px;
    color:blue;
}

.education-education{
    font-size:35px;
    color:blue;
}

.personal-name{
    font-size: 20px;
}

.personal-email {
    font-size: 20px;
}

.personal-address {
    font-size: 20px;
}

.education-college {
    font-size: 20px;
}

这是结果的截图：

带有 id="header_parent" 的 div 堆叠在其下方的 div 后面，其 class 是 class="container containerClass" 我知道这一点，因为如果我检查我的代码在浏览器上我可以看到它：

但是，如果我从我的 css 文件中删除 position:fixed，header_parent div 会出现在我页面的顶部，这是我希望它出现的方式，但我也希望它有它的位置是固定的，谁能向我解释为什么当我在 css 文件中添加 position:fixed 时会产生上述结果以及如何修复它？

Answer 1

将top: 0;添加到#header_parent的css。我还在下面的代码中添加了 width: 100% 以使其跨越整个宽度。

#header_parent {
   position: fixed;
    background-color:aqua;
    margin-left: 0px;
    margin-right: 0px;
    height:50px;
    margin-top: 0px;
    top: 0;
    width: 100%;
}

.containerClass{
    margin-top: 100px;
}

.green-box{
    background-color: green;
}

.red-box{
    background-color: red;
}

.personal-information {
    font-size:35px;
    color:blue;
}

.education-education{
    font-size:35px;
    color:blue;
}

.personal-name{
    font-size: 20px;
}

.personal-email {
    font-size: 20px;
}

.personal-address {
    font-size: 20px;
}

.education-college {
    font-size: 20px;
}

<div class="text_center">


    <div id="header_parent">
            RESUME INFORMATION
    </div>

    <div class="container containerClass">
        <div class="row">

            <div class="col-md-6 green-box">
                <div class="personal">

                    <fieldset>
                        <legend class="personal-information">Personal Information</legend>

                        <div class="personal-name">Name: Daniel Kamel</div>
                        <div class="personal-email">Email: kameldaniel@hotmail.com</div>
                        <div class="personal-address">address: Zouk Mickael</div>

                    </fieldset>

                </div>
            </div>

            <div class="col-md-6 red-box">
                <div class="education">
                    <fieldset>
                        <legend class="education-education">Education</legend>

                        <label class="education-college">ESIB from 2015 to 2020</label>
                    </fieldset>

                </div>
            </div>

        </div>
    </div>

</div>

Div 固定位置总是堆叠在第二个 div

Div with fixed position is always stacked on a second div

html

css

razor