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

Question

在我的Index.cshtml（ASP.Net Core 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 文件包含以下sn-p：

#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 堆叠在它下面的类为 class="container containerClass" 的 div 后面，我知道这是因为如果我在浏览器上检查我的代码，我可以看到它：

但是，如果我从我的 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>