Question

我的固定标题位于文章标记下，类为＃34;巨大框＆＃34; see the image我无法弄清楚问题是什么...我尝试重构html但它仍然做同样的事情..

这是该标题的CSS

.navs {
    position: fixed;
    margin-top: 30px;
    width: 100%;
    background-color: #FFFFFF;
    max-height: 50px;
    height: 50px;
}

＆＃13;

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing:border-box;
}

a{
    text-decoration: none;
}
body{
    background-color: #F5F5F5;
    font-family: 'Maquette-regular', sans-serif;
}
ul{
    padding: 10px;
}
.header{
    background-color: #131313;
    max-height: 32px;
    display: block;
    font-size: 13px;

}


.header:after { content: ""; clear: both; display: block; }

.item{
    display: inline-block;
    color: rgba(255,255,255,.6);
    margin-left: 15px;
}

.item:hover{
    color: silver;
    cursor: pointer;
}



.right-nav{
    float: right;

}

.left-nav{
    float: left;

}

.item-list{

}

.navs{
    position: fixed;
    margin-top: 30px;
    width: 100%;
    background-color: #FFFFFF;
    max-height: 50px;
    height: 50px;
}

.categories{
    color: silver;
    display: inline-block;
 /* line-height: 4em; */
    margin: 20;
    font-size: 15px;
}

.categories:hover{
    color: #000000;
    cursor: pointer;
}
.fa{
    color: silver;
    padding: 5px;
    font-size: 20px;
}

.social-btn .fa:hover{
    color: #808080;
    cursor: pointer;
}
.fa-search{
    border-left: 1px solid #EEEEEE;
}

.social-btn{
    float: right;
    padding: 10px;
}

.cover-img{ 
    background: linear-gradient(160deg, rgba(191, 0, 71, 0.9) 0%, transparent 50%), linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%), url(https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/Screen-Shot-2017-06-27-at-16.59.59-796x462.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}

.articles-box{
    outline: 1px solid;
    height: 75vh;
    max-height: 560px;
    margin-top: 55px;
}

.huge-box{
    background-color: grey;
    width: 66.66666%;
    height:  90%;
    margin: 10px;
}   

.tnw-logo{
    background: url(../images/logo.svg) no-repeat;
    background-size: contain;
    left: 24px;
    top: 105px;
    max-width: 50%;
    height: 100%;
    max-height: 112px;
    line-height: 1;
    pointer-events: none;
    text-align: right;
    position: absolute;
    color: #FFF;
    z-index: 5;
    right: 24px;
}

.article-date{
    position: absolute;
    color: #fff;
    top: 110px;
    left: 620px;
    font-size: 15px;
}

.article-about{
    position: relative;
    margin-top: -250px;
    width: 100%;
    padding: 15px;
}
.article-info{
    color: #fff;
    position: relative;
    margin: 0px 15px 0px;

}
.article-category{
    text-decoration: none;
    color: #fff;
    font-size: 20px;

}

#article-author{
    font-size: 14px;
    color: silver;
}

#article-author a{
    text-decoration: none;
    color: rgba(255,255,255,.6);
    font-size: 12px;
}

#article-author a:hover{
    color: silver;
}
.article-info .fa-clock-o, .article-info .fa-share-alt{
    font-size: 12px;
    color: rgba(255,255,255,.6);
}



.article-title{
    color: #fff;
    font-size: 55px;
    font-weight: 700;
}

.cover-img-small{
    background: linear-gradient(550deg, rgb(0, 0, 0) 0%, transparent 50%), linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%), url("https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/galaxy-note7_design-phone2-796x437.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.cover-img-small-2{
    background: linear-gradient(550deg, rgb(72, 62, 13) 0%, transparent 50%), linear-gradient(to top, rgba(163, 175, 67, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%), url(https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/Ransomware-Locked-PC-Computer-Security-796x398.jpg) no-repeat;    background-size: cover;
    width: 100%;
    height: 100%;
}

.small-box{
    width: 31.3333%;
    height: 45%;
    /* outline: 1px solid red; */
    float: right;
    margin: -484px 8px 0px 0px;
}


.small-box-2{
    width: 31.3333%;
    height: 45%;
    /* outline: 1px solid red; */
    float: right;
    margin: -246px 8px 0px 0px;
}

.article-category-small, .article-category-small-2{
    text-decoration: none;
    color: #fff;

}

.article-about-small{
    margin-top: -200px;
    padding: 25px;
}

.article-about-small-2{
    padding: 25px;
    margin-top: -195px;
}

.article-title-small, .article-title-small-2{
    font-size: 30px;
    color: #fff;
}


.article-info-small{
    margin-top: -25px;
    margin-left: 25px;
}

.article-info-small-2{
    margin-left: 25px;
    margin-top: -25px;
}

#article-author-small, #article-author-small-2{
    color: silver;
}

#article-author-small a, #article-author-small-2 a{
    color: silver;
    font-size: 12px;
}


.article-info-small .fa-clock-o, .article-info-small .fa-share-alt , .article-info-small-2 .fa-clock-o, .article-info-small-2 .fa-share-alt{
    font-size: 12px;
    color: rgba(255,255,255,.6);
}

.adbar{
    max-height: 95px;
    max-width: 550px;
    height: 100%;
    width: 100%;
    background-color: #5a4646;
}


#adspace{
    display: block;
    margin: 0px 250px 0px 250px;
}

.article{
    background-color: grey;
    width: 250px;
    height: 150px;
    display: inline-block;
    /* margin: 15px; */
    margin-top: 35px;
    margin-left: 15px;
}

.related-articles{
    margin-left: 50px;
    padding: 15px;
}

.latest-news-link{
    color:#F42;
    font-size: 24px;
    text-decoration: none;
}

.article-1-title{
    margin-top: 165px;
}

.articles-info{
    margin-top: 10px;
}

#author, #post-time{
    color: #AAAAAA;
    font-size: 12px;
}












/* Media Queries */

@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}
@media only screen and (max-width: 767px) {
    .item-list {
        display: none;
    }
}

＆＃13;

<html lang="en">
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> The Next Web | International </title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/main.css">
</head>


<body>
<header class="header">
<nav class="item-list">

<div class="left-nav">
<ul>
<li class="item"> News </li>
<li class="item"> Conference </li>
<li class="item"> Index </li>
<li class="item"> TQ </li>
<li class="item"> Deals </li>
<li class="item"> Answers </li>
<li class="item"> Tech5 </li>
</ul>
</div>

<div class="right-nav">
<ul>
<li class="item"> About </li>
<li class="item"> Team </li>
<li class="item"> Advertise </li>
<li class="item"> Jobs </li>
<li class="item"> Contact </li>
</ul>
</div>

</nav>

<nav class="navs">
<div class="categories">
CATEGORIES
</div>

<div class="social-btn">
  <i class="fa fa-facebook-official" aria-hidden="true"></i>
  <i class="fa fa-twitter" aria-hidden="true"></i>
  <i class="fa fa-envelope" aria-hidden="true"></i>
  <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
  <i class="fa fa-search" aria-hidden="true"></i>
</div>
</nav>

</header>

<section class="articles-box">
<article class="huge-box">
<div class="cover-img" title="Google is bankrupt">
</div>
<div class="tnw-logo"></div>
<span class="article-date">Wednesday — June 28, 2017</span>
<div class="article-about">
<a href="#" class="article-category">TECH</a>
<div class="article-title">Massive ransomware attack is causing chaos in airports, banks and more worldwide</div>
</div>
<div class="article-info">
<span id="article-author"> by <a href="#"> MIX </a></span>
<i class="fa fa-clock-o" aria-hidden="true"> 17 hours ago</i>
<i class="fa fa-share-alt" aria-hidden="true"> 1B+</i>
</div>
</article>

<article class="small-box">
<div class="cover-img-small" title="who wants that">
</div>
<div class="article-about-small">
<a href="#" class="article-category-small">GEAR</a>
<div class="article-title-small">Samsung is bringing back its Galaxy Note 7 for fans who aren't afraid of exploding phones</div>
</div>
<div class="article-info-small">
<span id="article-author-small"> by <a href="#"> Abhimanyu Ghoshal</a></span>
<i class="fa fa-clock-o" aria-hidden="true"> 6 hours ago</i>
<i class="fa fa-share-alt" aria-hidden="true"> 1B+</i>
</div>
</article>

<article class="small-box-2">
<div class="cover-img-small-2" title="say whattttt">
</div>
<div class="article-about-small-2">
<a href="#" class="article-category-small-2">SECURITY</a>
<div class="article-title-small-2">Petya ransomware victims can’t get their files back even if they pay up</div>
</div>
<div class="article-info-small-2">
<span id="article-author-small-2"> by <a href="#"> Abhimanyu Ghoshal</a></span>
<i class="fa fa-clock-o" aria-hidden="true"> 7 hours ago</i>
<i class="fa fa-share-alt" aria-hidden="true"> 1B+</i>
</div>
</article>

</section>

<section id="adspace">
<div class="adbar">
</div>
</section>


<section class="related-articles">
<div class="latest-news">
<a href="#" class="latest-news-link">Latest news > </a>
</div>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>


<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>


<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>


<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>
</section>

<section class="funding-list">
<span class="latest-funding">Latest funding rounds on Index.co</span>








</section>

</body>

</html>

＆＃13;

Answer 1

在z-index类

中添加了.navs值

Read more here

.navs{
    position: fixed;
    margin-top: 30px;
    width: 100%;
    background-color: #FFFFFF;
    max-height: 50px;
    height: 50px;
    z-index: 1; /* <-- here */
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing:border-box;
}

a{
    text-decoration: none;
}
body{
    background-color: #F5F5F5;
    font-family: 'Maquette-regular', sans-serif;
}
ul{
    padding: 10px;
}
.header{
    background-color: #131313;
    max-height: 32px;
    display: block;
    font-size: 13px;

}


.header:after { content: ""; clear: both; display: block; }

.item{
    display: inline-block;
    color: rgba(255,255,255,.6);
    margin-left: 15px;
}

.item:hover{
    color: silver;
    cursor: pointer;
}



.right-nav{
    float: right;

}

.left-nav{
    float: left;

}

.item-list{

}

.navs{
    position: fixed;
    margin-top: 30px;
    width: 100%;
    background-color: #FFFFFF;
    max-height: 50px;
    height: 50px;
    z-index: 1;
}

.categories{
    color: silver;
    display: inline-block;
 /* line-height: 4em; */
    margin: 20;
    font-size: 15px;
}

.categories:hover{
    color: #000000;
    cursor: pointer;
}
.fa{
    color: silver;
    padding: 5px;
    font-size: 20px;
}

.social-btn .fa:hover{
    color: #808080;
    cursor: pointer;
}
.fa-search{
    border-left: 1px solid #EEEEEE;
}

.social-btn{
    float: right;
    padding: 10px;
}

.cover-img{ 
    background: linear-gradient(160deg, rgba(191, 0, 71, 0.9) 0%, transparent 50%), linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%), url(https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/Screen-Shot-2017-06-27-at-16.59.59-796x462.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}

.articles-box{
    outline: 1px solid;
    height: 75vh;
    max-height: 560px;
    margin-top: 55px;
}

.huge-box{
    background-color: grey;
    width: 66.66666%;
    height:  90%;
    margin: 10px;
}   

.tnw-logo{
    background: url(../images/logo.svg) no-repeat;
    background-size: contain;
    left: 24px;
    top: 105px;
    max-width: 50%;
    height: 100%;
    max-height: 112px;
    line-height: 1;
    pointer-events: none;
    text-align: right;
    position: absolute;
    color: #FFF;
    z-index: 5;
    right: 24px;
}

.article-date{
    position: absolute;
    color: #fff;
    top: 110px;
    left: 620px;
    font-size: 15px;
}

.article-about{
    position: relative;
    margin-top: -250px;
    width: 100%;
    padding: 15px;
}
.article-info{
    color: #fff;
    position: relative;
    margin: 0px 15px 0px;

}
.article-category{
    text-decoration: none;
    color: #fff;
    font-size: 20px;

}

#article-author{
    font-size: 14px;
    color: silver;
}

#article-author a{
    text-decoration: none;
    color: rgba(255,255,255,.6);
    font-size: 12px;
}

#article-author a:hover{
    color: silver;
}
.article-info .fa-clock-o, .article-info .fa-share-alt{
    font-size: 12px;
    color: rgba(255,255,255,.6);
}



.article-title{
    color: #fff;
    font-size: 55px;
    font-weight: 700;
}

.cover-img-small{
    background: linear-gradient(550deg, rgb(0, 0, 0) 0%, transparent 50%), linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%), url("https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/galaxy-note7_design-phone2-796x437.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.cover-img-small-2{
    background: linear-gradient(550deg, rgb(72, 62, 13) 0%, transparent 50%), linear-gradient(to top, rgba(163, 175, 67, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%), url(https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/Ransomware-Locked-PC-Computer-Security-796x398.jpg) no-repeat;    background-size: cover;
    width: 100%;
    height: 100%;
}

.small-box{
    width: 31.3333%;
    height: 45%;
    /* outline: 1px solid red; */
    float: right;
    margin: -484px 8px 0px 0px;
}


.small-box-2{
    width: 31.3333%;
    height: 45%;
    /* outline: 1px solid red; */
    float: right;
    margin: -246px 8px 0px 0px;
}

.article-category-small, .article-category-small-2{
    text-decoration: none;
    color: #fff;

}

.article-about-small{
    margin-top: -200px;
    padding: 25px;
}

.article-about-small-2{
    padding: 25px;
    margin-top: -195px;
}

.article-title-small, .article-title-small-2{
    font-size: 30px;
    color: #fff;
}


.article-info-small{
    margin-top: -25px;
    margin-left: 25px;
}

.article-info-small-2{
    margin-left: 25px;
    margin-top: -25px;
}

#article-author-small, #article-author-small-2{
    color: silver;
}

#article-author-small a, #article-author-small-2 a{
    color: silver;
    font-size: 12px;
}


.article-info-small .fa-clock-o, .article-info-small .fa-share-alt , .article-info-small-2 .fa-clock-o, .article-info-small-2 .fa-share-alt{
    font-size: 12px;
    color: rgba(255,255,255,.6);
}

.adbar{
    max-height: 95px;
    max-width: 550px;
    height: 100%;
    width: 100%;
    background-color: #5a4646;
}


#adspace{
    display: block;
    margin: 0px 250px 0px 250px;
}

.article{
    background-color: grey;
    width: 250px;
    height: 150px;
    display: inline-block;
    /* margin: 15px; */
    margin-top: 35px;
    margin-left: 15px;
}

.related-articles{
    margin-left: 50px;
    padding: 15px;
}

.latest-news-link{
    color:#F42;
    font-size: 24px;
    text-decoration: none;
}

.article-1-title{
    margin-top: 165px;
}

.articles-info{
    margin-top: 10px;
}

#author, #post-time{
    color: #AAAAAA;
    font-size: 12px;
}












/* Media Queries */

@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}
@media only screen and (max-width: 767px) {
    .item-list {
        display: none;
    }
}

<html lang="en">
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> The Next Web | International </title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/main.css">
</head>


<body>
<header class="header">
<nav class="item-list">

<div class="left-nav">
<ul>
<li class="item"> News </li>
<li class="item"> Conference </li>
<li class="item"> Index </li>
<li class="item"> TQ </li>
<li class="item"> Deals </li>
<li class="item"> Answers </li>
<li class="item"> Tech5 </li>
</ul>
</div>

<div class="right-nav">
<ul>
<li class="item"> About </li>
<li class="item"> Team </li>
<li class="item"> Advertise </li>
<li class="item"> Jobs </li>
<li class="item"> Contact </li>
</ul>
</div>

</nav>

<nav class="navs">
<div class="categories">
CATEGORIES
</div>

<div class="social-btn">
  <i class="fa fa-facebook-official" aria-hidden="true"></i>
  <i class="fa fa-twitter" aria-hidden="true"></i>
  <i class="fa fa-envelope" aria-hidden="true"></i>
  <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
  <i class="fa fa-search" aria-hidden="true"></i>
</div>
</nav>

</header>

<section class="articles-box">
<article class="huge-box">
<div class="cover-img" title="Google is bankrupt">
</div>
<div class="tnw-logo"></div>
<span class="article-date">Wednesday — June 28, 2017</span>
<div class="article-about">
<a href="#" class="article-category">TECH</a>
<div class="article-title">Massive ransomware attack is causing chaos in airports, banks and more worldwide</div>
</div>
<div class="article-info">
<span id="article-author"> by <a href="#"> MIX </a></span>
<i class="fa fa-clock-o" aria-hidden="true"> 17 hours ago</i>
<i class="fa fa-share-alt" aria-hidden="true"> 1B+</i>
</div>
</article>

<article class="small-box">
<div class="cover-img-small" title="who wants that">
</div>
<div class="article-about-small">
<a href="#" class="article-category-small">GEAR</a>
<div class="article-title-small">Samsung is bringing back its Galaxy Note 7 for fans who aren't afraid of exploding phones</div>
</div>
<div class="article-info-small">
<span id="article-author-small"> by <a href="#"> Abhimanyu Ghoshal</a></span>
<i class="fa fa-clock-o" aria-hidden="true"> 6 hours ago</i>
<i class="fa fa-share-alt" aria-hidden="true"> 1B+</i>
</div>
</article>

<article class="small-box-2">
<div class="cover-img-small-2" title="say whattttt">
</div>
<div class="article-about-small-2">
<a href="#" class="article-category-small-2">SECURITY</a>
<div class="article-title-small-2">Petya ransomware victims can’t get their files back even if they pay up</div>
</div>
<div class="article-info-small-2">
<span id="article-author-small-2"> by <a href="#"> Abhimanyu Ghoshal</a></span>
<i class="fa fa-clock-o" aria-hidden="true"> 7 hours ago</i>
<i class="fa fa-share-alt" aria-hidden="true"> 1B+</i>
</div>
</article>

</section>

<section id="adspace">
<div class="adbar">
</div>
</section>


<section class="related-articles">
<div class="latest-news">
<a href="#" class="latest-news-link">Latest news > </a>
</div>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>


<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>


<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>

<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>


<article class="article">
<h5 class="article-1-title">Tinder Gold lets you see who likes you without matching</h5>
<div class="articles-info">
<span id="author"> Rachel Kaser</span>
<span id="post-time"> 3 hours ago </span>
</div>
</article>
</section>

<section class="funding-list">
<span class="latest-funding">Latest funding rounds on Index.co</span>








</section>

</body>

</html>

Answer 2

在css中使用z-index:99 有关详细信息，请访问https://www.w3schools.com/cssref/pr_pos_z-index.asp

固定标题位于元素下

2 个答案: