html - 重叠部分html

问题描述

我网站的两个主要部分重叠，我似乎无法弄清楚原因。我已经阅读了很多关于绝对位置等的内容。也许我的整个结构不好？我真的不知道。这是我自己写的第一个网站。欢迎任何帮助！我的网站可以在以下位置找到：h16projecten.github.io

body {
    margin: 0;
    padding: 0;
    background: white;
}

.header {
    position: relative;
    z-index: 100;
    margin: 3rem 3rem 3rem 19%;
}

.header img {
    height: 65px;
    width: auto;
    opacity: 1;
}

#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100%;
    display: flex;
}

#team {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
}

.layerleft {
    position: relative;
    width: 48%;
    height: 100vh;
    background: white;
    box-sizing: border-box;
}

.layerright {
    width: 52%;
    height: 100vh;
    box-sizing: border-box;
    border-left: 420px solid white;
    border-top: 100vh solid transparent;
}

.content {
    margin: 40% -5% 2rem 40%;
    font-family: Libre Baskerville;
    font-size: 20px;
    opacity: 0.8;
    font-weight: 100;
    z-index: 1;
}

.media {
    margin: 1rem -3rem 2rem 40%;
    font-size: 27px;
    cursor: pointer;
    opacity: 0.7;
}

.media p ion-icon:hover {
    opacity: 1;
    color: #1c3c64;
}

#team h2 {
    font-family: Libre Baskerville;
    margin: 1rem 10rem 2rem 10%;
    font-size: 45px;
    font-weight: 100;
    line-height: 1.8;
}

#team hr {
    margin: 1rem 73% 2rem 10%;
    color: #1c3c64;
    background-color: #1c3c64;
    height: 1px;
}

.teamdesc {
    margin: 4% 5rem 2rem 12%;
    font-family: Libre Baskerville;
    font-size: 30px;
    opacity: 0.8;
    font-weight: 100;
}

footer {
    position: relative;
    margin: 7rem 2rem 2rem 2rem;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-desc p {
    font-family: Libre Baskerville;
    font-size: 18px;
    opacity: 0.8;
    font-weight: 100;
    display: inline-block;
}

.footer-logo {
    margin: 0 4% 0 0;
    height: 45px;
    display: inline-block;
}


.fullscreen-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -100;
    height: 100%;
}

.fullscreen-bg__video {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .content {
        margin: 110vh -90% 2rem 25%;
    }

    .media {
        margin: 1rem -3rem 2rem 25%;
    }

    .header {
        margin: 10rem 3rem 1rem 9.5%;
    }

    .layerright {
        border-left: 100px solid white;
        border-top: 100vh solid transparent;
    }

    #team h2 {
        margin: 85vh 10rem 1rem 12.5%;
    }

    #team hr {
        margin: 1rem 45% 2rem 12.5%;
    }

    .teamdesc {
        margin: 12% 5rem 2rem 14%;
        font-size: 25px;
    }

    .footer-desc p {
        font-size: 15px;
    }

    .footer-logo {
        height: 35px;
    }
}

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H16 Projecten</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
    <link rel='stylesheet' id='googleFonts-css'
          href='https://fonts.googleapis.com/css?family=Libre+Baskerville%3A400%2C700' type='text/css' media='all'/>
</head>

<body>
<div class="fullscreen-bg">
    <video loop muted autoplay playsinline class="fullscreen-bg__video">
        <source src="videos/video.mp4" type="video/mp4">
    </video>
</div>

<header class="header">
    <a class="header-logo"><img src="images/h16logobnw.png" alt="H16"></a>
</header>

<main>
    <section id="wrapper">
        <div class="layerleft">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit consequat elit non laoreet.
                    Pellentesque consequat sapien at tellus tempor consequat. Aliquam dictum justo a facilisis tempor.
                    Duis scelerisque congue aliquam. Sed lacinia, est in sollicitudin egestas, orci diam elementum ex,
                    ultrices posuere massa urna tincidunt massa. Mauris fermentum luctus lobortis. Morbi tempus neque a
                    justo mattis, et elementum tellus tincidunt. Vestibulum suscipit nunc at lorem lacinia lobortis.
                    Suspendisse elementum, neque vel cursus rutrum, odio lacus posuere purus, mattis hendrerit ante orci
                    porta nisl. Mauris magna tellus, faucibus ut semper.</p>
            </div>
            <div class="media">
                <p>
                    <ion-icon onclick="location.href='https://www.facebook.com/H16.projecten';"
                              name="logo-facebook"></ion-icon>
                    <ion-icon onclick="location.href='https://instagram.com/h16.projecten';"
                              name="logo-instagram"></ion-icon>
                </p>
            </div>
        </div>
        <div class="layerright">
            <!-- video -->
        </div>
    </section>

    <section id="team">
        <div class="team">
            <h2>Team</h2>
            <hr>
            <div class="teamdesc">
                Name's
                <br>
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper rhoncus odio nec luctus.
                Vestibulum
                aliquet nunc quis mi pharetra porttitor. Sed eros tortor, tincidunt ut ex ac, tincidunt tempus odio.
                Mauris
                vulputate magna et urna mollis auctor. Nam nulla.
            </div>
        </div>
    </section>
</main>

<footer class="footer">
    <img class="footer-logo" src="images/h16logobnw.png" alt="H16"> <span class="footer-desc"><p>© 2020 H16 - All right reserved</p></span>
</footer>
</body>
</html>

预览：h16projecten.github.io 有点像这样：

索引视图

向下滚动时

谢谢！

标签： htmlcss

html - 重叠部分html

问题描述

解决方案

推荐阅读