html - 为什么部分推荐没有正确放置

只需删除此 CSS：

.section-services{
}
.services-overlay{
    position: absolute;
    top: 80%;
}

看看我的回答：

@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:300,400|Lato:300i,400|Pacifico|Tangerine:400,700&display=swap');
body{
	font-family: lato;
	font-size: 20px;
}
.header-text{
    font-size: 30px;
    font-weight: bold;
    word-spacing: 3px;
    letter-spacing: 3px;
    font-family: Abril Fatface;
    color:#2ecc71;
}
.degrees{
	font-size: 20px;
}
.top-nav{
	font-size: 20px;
	font-family: lato;
}
.navbar-light .navbar-nav .nav-link{
	color: black;
	margin: 3px;
}
.s-icon i{
	margin:3px;
}
/*----about me section---*/
.section-about{
	background: #f8f8f8;
    
}
.section-about h2{
	font-family: Abril Fatface;
	font-size: 40px!important;
	letter-spacing: 3px;
	word-spacing: 4px;
}
.section-about h2{
	margin-top: 100px;
}
h2:after {
    display: block;
    width: 100px;
    height: 3px;
    background-color: #2ecc71;
    content: "";
    margin-top: 10px;
    margin-bottom: 10px;
}
.section-about p{
	margin-top: 30px;
}
/*----services section---*/

.section-services .card{
	background-color: #2ecc713d;
}
.section-services .card-header{
	background-color:#2ecc71; 
	text-align: center;
	margin:5px 0;
}

.section-services h2{
	font-family: Abril Fatface;
	font-size: 40px!important;
	letter-spacing: 3px;
	word-spacing: 4px;
	position: absolute;
	top: 10%;
	right: 50%;
	text-transform: uppercase;
}
.section-services h2:after{
	width: 220px;
}
.section-services p{
	text-align: center;
}
.section-services .card-body img{
	max-width: 100%;
	text-align: center;
	display: block;
	height: 150px;
	width: 50%;
	margin: 0 auto;
}
/*------section-testimonial---*/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>homw</title>
	<script src="https://kit.fontawesome.com/7ea1edf4c8.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Lato|Pacifico|Tangerine&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="resources/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/367919f9b0.js"></script>
  <style>
    .carousel-item{
    height: 100vh;
} 
.carousel-item img{
    height: 100vh;
    object-fit:cover;
    overflow: hidden;
}
  </style>
  
</head>
<body>

   <nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" style="font-family:Pacifico;font-size: 30px;color: #2ecc71;" href="#">DR. S. Faruqi</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <div class="navbar-nav mx-auto top-nav" >
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About Me</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link " href="#">Testimonials</a>
      <a class="nav-item nav-link " href="#">Chembers</a>
    </div>
    
      <span class="s-icon">
        <i class="fab fa-facebook-square fa-2x"><a href="fb.com" title=""></a></i>
        <i class="fab fa-twitter-square fa-2x"><a href="fb.com" title=""></a></i>
        <i class="fab fa-youtube-square fa-2x"><a href="fb.com" title=""></a></i>
      </span>
  </div>
</nav>




    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: 100vh;position: relative;">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://source.unsplash.com/random" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/3" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/4" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class="section-about">
  <div class="container">
   <div class="row">
       <div class="col-md-5">
       <h2>About Me</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. </p>
    </div>
    <div class="col-md-7">
     <img src="https://source.unsplash.com/random/22" alt="" class="img-fluid">
    </div>
  </div>
 </div>
</div>


<div class="section-services "style="position:relative ;" >
  <img src="https://source.unsplash.com/random/5.png" alt="" style="width: 100%;height: 400px;">
  <h2>Services </h2>
  <div class="container">
  <div class="services-inner">
    <div class="row  services-overlay ">
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/6" alt="" class=" card-img-top " >
            <h4 class="card-header">Primary Treatment</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/7" alt="" class="card-img-top " >
            <h4 class="card-header">Primary Injury</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/8" alt="" class=" card-img-top " >
            <h4 class="card-header">Vaccination</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     

     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/9" alt="" class=" card-img-top " >
            <h4 class="card-header">Health Advice</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/10" alt="" class=" card-img-top " >
            <h4 class="card-header">Childern care</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
     <div class="col-md-4 ">
      <div class="card">
        <div class="card-body">
          <img src="https://source.unsplash.com/random/11" alt="" class=" card-img-top">
            <h4 class="card-header">Health education</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
     </div>
  </div>
  
 <!--end of row-->
  </div>
</div>

</div>


<div   class="section-testimonial">
  <div  class="row" >
      <div  class="col-md-2">
        <h2>  What people say about me</h2>
      </div>
      <div   class="col-md-10">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  </p> 
      </div>
  </div>  
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

html - 为什么部分推荐没有正确放置

问题描述

解决方案

推荐阅读