在这种情况下如何停止 div/elements 重叠？

Question

目前，我的 divs/elements 相互重叠。我该如何解决？如果您在我的代码中发现更多问题，请告诉我。我尝试使用头寸和其他东西（例如保证金），但对我不起作用，或者我不知道该怎么做。也许有人也可以帮助我如何在向下滚动时使这个菜单变粘。

感谢您的帮助！

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #282A2E;
    font-family: 'Fira Code', monospace;

}

menu {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-gap: 10px;
    padding-bottom: 100px;



}

.menu__item {
    border: 3px dotted white;
    width: 150px;
    padding: 10px;
    text-align: center;

}


.menu__item a {
    text-decoration: none !important;

    color: white;
    font-size: 20px;




}

#whoami #skills #projects {
    padding-bottom: 50px;

}



.description__text {
    border: 3px dotted#282A2E;
    width: 500px;
    float: left;
    margin-left: 200px;
    height: 399px;
    text-align: center;
    background-color: white;
}

.description__text h1 {

    color: #282A2E;
    font-size: 50px;

}

.description__text p {

    color: #282A2E;
}

.section__header h1 {
    width: auto;
    height: 50px;
    border: 3px dotted#282A2E;
    background-color: white;
    display: block;
    margin-top: auto;
    text-align: center;
    padding-top: 10px;
}

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap" rel="stylesheet">
    <script src="hereFontAwesome" crossorigin="anonymous"></script>
    </head>

<body>
    <div id="container">
        <menu>

            <div class="menu__item">
                <a href="#whoami">whoami</a>
            </div>
            <div class="menu__item">
                <a href="#skills">skills</a>
            </div>
            <div class="menu__item">
                <a href="#projects">projects</a>
            </div>
            <div class="menu__item">
                <a href="contact">contact</a>
            </div>

        </menu>

        <section id="whoami">

            <img src="./images/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg"
                style="border: 2px solid white; float: right; margin-right: 200px; ">
            <article class="description__text">
                <h1>Who am I?</h1>
                <p>TEST!</p>
                <p>TEST</p>
                <p>TEST</p>
                <p>TEST</p>

            </article>
        </section>
        <section id="skills">
            <div class="section__header">
                <h1>
                    My skills
                </h1>
            </div>
            <article style="margin-top: 100px;">
                <div style="color: white;display: grid;
            grid-template-columns: repeat(3, 500px); gap:50px;
            text-align: center; justify-content:center">
                    <i class="fab fa-html5 fa-5x"></i>
                    <i class="fab fa-css3-alt fa-5x"></i>
                    <i class="fab fa-sass fa-5x"></i>
                    <i class="fab fa-js-square fa-5x"></i>
                    <i class="fas fa-database fa-5x"></i>
                    <i class="fab fa-git fa-5x"></i>

                </div>
                <p style="color: white; text-align: center; margin-top: 100px;">TEXT </p>
            </article>

        </section id="projects">
        <div class="section__header">

            <h1>My projects</h1>
        </div>
        </section>


    </div>
    <script src="./scripts/script.js" async defer></script>
</body>

</html>

Answer 1

元素重叠的主要原因是您将一个元素 (article.description__text) 浮动在一个未浮动的元素 (section#whoami) 中。

如果您使用浮动布局页面，则需要对所有元素使用 float。一种更现代的页面布局方式是使用 flexbox.

Answer 2

在这些之间添加一个 , section id

#whoami,
#skills,
#projects {
  padding-bottom: 50px;
}

并从 .description__text 中删除 float: left; class.It 将解决重叠问题。

https://codesandbox.io/s/hopeful-river-kkkps?file=/style.css

在这种情况下如何停止 div/elements 重叠？

How can I stop div/elements overlapping in this case?

html

css

overlap