div 会越过粘性导航栏：relative

问题描述 投票：0回答：1

我正在做一个大学项目，我必须复制这个网站https://www.orlandoweekly.com/ 到目前为止我做得很好，我只想为左侧和右侧的内容制作两个单独的 div。因此，我使用 div class="main-content" 并使用 Position:relative 声明它，以便可以使用position:absolute指定嵌套的 div 元素（left-content 和 right-content），并且我可以将它们定位到左侧和正确的。问题是，当我这样做并向下滚动页面时，主要内容会越过导航栏并覆盖它。

我已经尝试使用 z-index 和其他基本方法来修复它，但似乎没有任何效果。只有当我删除主内容中的position:relative时，div才会按预期工作，它才会按我想要的方式工作。 我将在这里分享我的代码（注意：这是我用来测试这个东西的另一个分支，所以很多 div 都丢失了）

        /*Gestione della scrollata*/
        window.addEventListener('scroll', function() {
            var navbar = document.querySelector('.bar');
            var newItem = document.createElement('li');
            newItem.innerHTML = '<a href="#">OW</a>';

            if (window.scrollY > 45) {
                if (!navbar.querySelector('#newItem')) {
                    newItem.id = 'newItem';
                    navbar.insertBefore(newItem, navbar.firstChild);
                }
            } else {
                var addedItem = document.getElementById('newItem');
                if (addedItem) {
                    addedItem.parentNode.removeChild(addedItem);
                }
            }
        });
*{
    margin: 0;
    box-sizing: border-box;
    font-family:Lato, Helvetica, Arial, sans-serif;
}

.montserrat-h3 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.open-sans-p {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}

h3{

    margin-top:6px;
}
p{
    margin-top: 10px;
}

.title{
    background-color: rgb(247,148,30);
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;


}
.title a{
     text-decoration: none;
     cursor: pointer;
     color: white;
     font-weight: 400;
 }
#support{
    height: auto;
    width: 130px;
    background-color: rgb(247,148,30);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10px;
    cursor:pointer;

    transform-origin: bottom left;
    transform: rotate(-90deg);

    position: fixed;
    left: 100%;
    top: 50%;

    transition: 0.5s;

}
#support-white{
    color: white;
    text-decoration: none;
}
#support:hover{
    background-color: black;
    text-decoration: none;
}

#privacy{
    padding: 5px;

    position: fixed;
    top: 0;
    right: 0;
    height: auto;
    width:auto;
    background-color: rgb(54, 139, 214);

    border-radius: 0 0 3px 3px;
}
.fa-cog{
    color: white;
}


.Logo-conteiner {
    width: 100%;
    height: 110px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}
.logo{
    width: 1020px;
    margin: 5px;

}
.sticky-nav{
    width: 100%;
    height: 23px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: sticky;
    top: 0;
    overflow: visible;
}

.navbar{
    width: 1020px;
    background-color: white;


    z-index: 1000;


}

.navbar ul{
    list-style: none;
    padding: 0;
}
.navbar ul li {
    display: inline-block;
    margin-right: 0; /* Rimuovi il margine destro */
    margin-bottom: 0;
    padding-right: 8px; /* Aggiungi il padding destro */


}
.navbar ul li a{
    font-family: 'Open Sans Condensed', sans-serif;
    color: black;
    text-decoration: none;
    font-weight: 700;

    margin: 4px;

    transition: 100ms;
}
#newItem{

    background-color: rgb(247,148,30);

    display: flex;
    justify-content: center;
    align-items: center;

}
#newItem a{
    color: white;
    padding:0;
    margin:0;
}
.navbar ul li a:hover {
    background-color: rgb(247,148,30);
    color: white;
    margin-bottom: 0;
    padding-bottom: 3px;
    padding-top: 3px;
}

.bar {
    display: flex; /* Imposta il layout flessibile */
    flex-wrap: nowrap; /* Evita che gli elementi vadano a capo */
}

.bar li {
    flex: 1; /* Distribuisci lo spazio disponibile in modo equo tra gli elementi */
    white-space: nowrap; /* Impedisce alle voci di andare a capo */
}
#hrOrange{
    border: 0.5px solid rgb(247,148,30);
}
#rettOrange{
    background-color: rgb(247,148,30);
    color: white;

    margin: auto;
    padding: 3px;
}

.item{
    padding: 0;
    margin:0;
    display: flex;
    justify-content: center;
}

.undercontent{
    width: 100%;
    display: flex;
    justify-content: center;

    margin-top: 30px;

    height: 2000px;
}

.main-content{
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;

    position: relative;
}

.left-content{
    width: calc(100%*(2/3));
    position: absolute;
    left: 0;
    top: 0;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

<div class="title">
    <a href="#">BEST OF LOREM IPSUM</a>
    <div id="privacy">
        <i class="fas fa-cog"></i>
        <a href="#">Lorem Ipsum</a>
    </div>
</div>

<div id="support">
    <a href="#" id="support-white">Lorem Ipsum</a>
</div>

<div class="Logo-conteiner">
    <div class="logo">
        <a href="#"><img src="https://placehold.co/230x97"></a>
    </div>
</div>
<div class="sticky-nav">
    <div class="navbar"> <!-- drop menu-->
       <ul class="bar open-sans-p"> <!--menu-->
           <li>
                <a href="#" id="prim">Lorem Ipsum</a>

            </li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#"><div id="rettOrange">Lorem Ipsum</div></a></li>
            <li><div class="item"><a href="#"><i class="fas fa-user"></i></a></div></li>
            <li><div class="item"><a href="#"><i class="fas fa-search"></i></a></div></li>
        </ul>
        <hr id="hrOrange">
    </div>
</div>
<div class="undercontent">
    <div class="main-content">
        <div class="left-content">
            <img src="https://placehold.co/644x361">
        </div>
        <div class="right-content"></div>
    </div>
</div>

html css css-position
1个回答
0
投票

将以下代码添加到 

.undercontent
类中。

position: relative;
z-index: -1;


/*Gestione della scrollata*/
        window.addEventListener('scroll', function() {
            var navbar = document.querySelector('.bar');
            var newItem = document.createElement('li');
            newItem.innerHTML = '<a href="#">OW</a>';

            if (window.scrollY > 45) {
                if (!navbar.querySelector('#newItem')) {
                    newItem.id = 'newItem';
                    navbar.insertBefore(newItem, navbar.firstChild);
                }
            } else {
                var addedItem = document.getElementById('newItem');
                if (addedItem) {
                    addedItem.parentNode.removeChild(addedItem);
                }
            }
        });
*{
    margin: 0;
    box-sizing: border-box;
    font-family:Lato, Helvetica, Arial, sans-serif;
}

.montserrat-h3 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.open-sans-p {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}

h3{

    margin-top:6px;
}
p{
    margin-top: 10px;
}

.title{
    background-color: rgb(247,148,30);
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;


}
.title a{
     text-decoration: none;
     cursor: pointer;
     color: white;
     font-weight: 400;
 }
#support{
    height: auto;
    width: 130px;
    background-color: rgb(247,148,30);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 10px;
    cursor:pointer;

    transform-origin: bottom left;
    transform: rotate(-90deg);

    position: fixed;
    left: 100%;
    top: 50%;

    transition: 0.5s;

}
#support-white{
    color: white;
    text-decoration: none;
}
#support:hover{
    background-color: black;
    text-decoration: none;
}

#privacy{
    padding: 5px;

    position: fixed;
    top: 0;
    right: 0;
    height: auto;
    width:auto;
    background-color: rgb(54, 139, 214);

    border-radius: 0 0 3px 3px;
}
.fa-cog{
    color: white;
}


.Logo-conteiner {
    width: 100%;
    height: 110px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}
.logo{
    width: 1020px;
    margin: 5px;

}
.sticky-nav{
    width: 100%;
    height: 23px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: sticky;
    top: 0;
    overflow: visible;
}

.navbar{
    width: 1020px;
    background-color: white;


    z-index: 1000;


}

.navbar ul{
    list-style: none;
    padding: 0;
}
.navbar ul li {
    display: inline-block;
    margin-right: 0; /* Rimuovi il margine destro */
    margin-bottom: 0;
    padding-right: 8px; /* Aggiungi il padding destro */


}
.navbar ul li a{
    font-family: 'Open Sans Condensed', sans-serif;
    color: black;
    text-decoration: none;
    font-weight: 700;

    margin: 4px;

    transition: 100ms;
}
#newItem{

    background-color: rgb(247,148,30);

    display: flex;
    justify-content: center;
    align-items: center;

}
#newItem a{
    color: white;
    padding:0;
    margin:0;
}
.navbar ul li a:hover {
    background-color: rgb(247,148,30);
    color: white;
    margin-bottom: 0;
    padding-bottom: 3px;
    padding-top: 3px;
}

.bar {
    display: flex; /* Imposta il layout flessibile */
    flex-wrap: nowrap; /* Evita che gli elementi vadano a capo */
}

.bar li {
    flex: 1; /* Distribuisci lo spazio disponibile in modo equo tra gli elementi */
    white-space: nowrap; /* Impedisce alle voci di andare a capo */
}
#hrOrange{
    border: 0.5px solid rgb(247,148,30);
}
#rettOrange{
    background-color: rgb(247,148,30);
    color: white;

    margin: auto;
    padding: 3px;
}

.item{
    padding: 0;
    margin:0;
    display: flex;
    justify-content: center;
}

.undercontent{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    height: 2000px;
    position: relative;
    z-index: -1;
}

.main-content{
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;

    position: relative;
}

.left-content{
    width: calc(100%*(2/3));
    position: absolute;
    left: 0;
    top: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

<div class="title">
    <a href="#">BEST OF LOREM IPSUM</a>
    <div id="privacy">
        <i class="fas fa-cog"></i>
        <a href="#">Lorem Ipsum</a>
    </div>
</div>

<div id="support">
    <a href="#" id="support-white">Lorem Ipsum</a>
</div>

<div class="Logo-conteiner">
    <div class="logo">
        <a href="#"><img src="https://placehold.co/230x97"></a>
    </div>
</div>
<div class="sticky-nav">
    <div class="navbar"> <!-- drop menu-->
       <ul class="bar open-sans-p"> <!--menu-->
           <li>
                <a href="#" id="prim">Lorem Ipsum</a>

            </li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#"><div id="rettOrange">Lorem Ipsum</div></a></li>
            <li><div class="item"><a href="#"><i class="fas fa-user"></i></a></div></li>
            <li><div class="item"><a href="#"><i class="fas fa-search"></i></a></div></li>
        </ul>
        <hr id="hrOrange">
    </div>
</div>
<div class="undercontent">
    <div class="main-content">
        <div class="left-content">
            <img src="https://placehold.co/644x361">
        </div>
        <div class="right-content"></div>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.