为什么我的日记部分（第五）出现/在我的教师部分（第四）中工作？

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

我还是 html、css 和 javascript 的初学者。我在 youtube 上观看了一个教程并决定尝试一下，我添加了一些更改并且运行良好，直到日记部分开始出现在教师部分，这是完全不同的部分。

这是教师部分(teachers section)。但正如您所看到的 (diary section)，我放在日记部分的图像出现在教师部分的下方，位于教师部分的元素后面。

我认为问题是部分标签。我尝试重写日记部分的代码，但仍然没有解决问题。

这是代码：

let navbar = document.querySelector('.navbar');

document.querySelector('#menu-btn').oneclick = () => {
  navbar.classList.toggle('active');
  navbar.classList.remove('active');
  searchForm.classList.remove('active');
}

let searchForm = document.querySelector('.search-form');

document.querySelector('#search-btn').oneclick = () => {
  searchForm.classList.toggle('active');
  navbar.classList.remove('active');
  searchForm.classList.remove('active');
}

window.onscroll = () => {
  navbar.classList.remove('active');
  searchForm.classList.remove('active');
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
:root {
  --main-color: #04246b;
  --black: #13131a;
  --bg: #add8e6;
  --border: .1rem solid rgba(0, 0, 0, 0.3);
}

* {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  transition: .2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-padding-top: 9rem;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  width: .8rem;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 5rem;
}

body {
  background: var(--bg);
}

section {
  padding: 2rem 7%;
}

.heading {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  padding-bottom: 3.5rem;
  font-size: 4rem;
}

.heading span {
  color: var(--main-color);
  text-transform: uppercase;
}

.header {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 7%;
  border-bottom: var(--border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 10rem;
}

.lsclogo img {
  height: 10rem;
  width: 10rem;
}

.header .navbar a {
  margin: 0 1rem;
  font-size: 1.6rem;
  color: #162a2c;
}

.header .navbar a:hover {
  color: var(--main-color);
  border-bottom: .1rem solid var(--main-color);
  padding-bottom: .5rem;
}

.header .icons div {
  color: #162a2c;
  cursor: pointer;
  font-size: 2.5rem;
  margin-left: 2rem;
}

.header .icons div:hover {
  color: var(--main-color);
}

#menu-btn {
  display: none;
}

.header .search-form {
  position: absolute;
  top: 30%;
  right: 1%;
  background: #fff;
  width: 35rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  transform: scaleY(1);
  transform-origin: top;
}

.header .search-form.active {
  transform: scaleY(1);
}

.header .search-form input {
  height: 100%;
  width: 100%;
  font-size: 1.6rem;
  color: var(--black);
  padding: 1rem;
  text-transform: none;
}

.header .search-form label {
  cursor: pointer;
  font-size: 2.2rem;
  margin-right: 1.5rem;
  color: var(--black);
}

.header .search-form label:hover {
  color: var(--main-color);
}

.headstart {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url(../images/headstart.jpeg);
  background-size: cover;
  background-position: center;
}

.headstart .content {
  max-width: 60rem;
}

.headstart .content h3 {
  font-size: 6rem;
  text-transform: uppercase;
  color: #04246b;
}

.headstart .content p {
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.8;
  padding: 1rem 0;
  color: #eee;
}

.background .row {
  display: flex;
  align-items: center;
  background: var(--main-color);
  flex-wrap: wrap;
}

.background .row .image {
  flex: 1 1 61rem;
}

.background .row .image img {
  width: 100%;
}

.background .row .content {
  flex: 1 1 45rem;
  padding: 4.5rem;
  font-size: 1rem;
}

.background .row .content h3 {
  font-size: 2rem;
  color: #fff;
}

.background .row .content p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
}

.row .column {
  float: left;
  width: 20%;
  padding: .1rem;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.row .column h2 {
  margin-left: 70px;
}

.row .column img:hover {
  background: #04246b;
}

.teachers .container {
  position: absolute;
  width: 90%;
  right: 4.5%;
  background-color: #04246b;
  padding: 110px;
}

.teachers .container .adviser img {
  float: left;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .adviser h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 17rem;
}

.teachers .container .adviser p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 17rem;
}

.teachers .container .comp {
  margin-top: 12rem;
}

.teachers .container .comp img {
  float: right;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .comp h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 83rem;
}

.teachers .container .comp p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 83rem;
}

.teachers .container .science {
  margin-top: 12rem;
}

.teachers .container .science img {
  float: left;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .science h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 17rem;
}

.teachers .container .science p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 17rem;
}

.teachers .container .english {
  margin-top: 12rem;
}

.teachers .container .english img {
  float: right;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .english h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 83rem;
}

.teachers .container .english p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 83rem;
}

.teachers .container .socsci {
  margin-top: 12rem;
}

.teachers .container .socsci img {
  float: left;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .socsci h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 17rem;
}

.teachers .container .socsci p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 17rem;
}

.teachers .container .religion {
  margin-top: 12rem;
}

.teachers .container .religion img {
  float: right;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .religion h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 83rem;
}

.teachers .container .religion p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 83rem;
}

.teachers .container .filipino {
  margin-top: 12rem;
}

.teachers .container .filipino img {
  float: left;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .filipino h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 17rem;
}

.teachers .container .filipino p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 17rem;
}

.teachers .container .mapeh {
  margin-top: 12rem;
}

.teachers .container .mapeh img {
  float: right;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .mapeh h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 83rem;
}

.teachers .container .mapeh p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 83rem;
}

.teachers .container .tle {
  margin-top: 12rem;
}

.teachers .container .tle img {
  float: left;
  width: 30;
  border: 10px solid #ddd;
  width: 150px;
}

.teachers .container .tle h2 {
  font-size: 2rem;
  color: #fff;
  margin-left: 17rem;
}

.teachers .container .tle p {
  font-size: 1.3rem;
  color: #ccc;
  padding: 1 rem 0;
  line-height: 1.8;
  margin-left: 17rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DEAR ST. LORENZO RUIZ</title>

  <!-- font awesome cdn link  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

  <!-- custom css file link  -->
  <link rel="stylesheet" href="css/style.css">

</head>

<body>


  <!-- header section starts  -->

  <header class="header">

    <a href="#" class="lsclogo">
      <img src="images/lsclogo.png" width="8%" height="8%" alt="">
    </a>

    <nav class="navbar">
      <a href="#headstart">headstart</a>
      <a href="#background">background</a>
      <a href="#students">students</a>
      <a href="#teachers">teachers</a>
      <a href="#diary">diary</a>
      <a href="#memes">memes</a>
      <a href="#group">group</a>
    </nav>

    <div class="icons">
      <div class="fas fa-search" id="search-btn"></div>
      <div class="fas fa-bars" id="menu-btn"></div>
    </div>

  </header>

  <!-- header section ends  -->


  <!-- headstart section starts  -->

  <section class="headstart" id="headstart">

    <div class="content">
      <h3>Dear St. Lorenzo Ruiz</h3>
      <p>Warm greetings from the one and only humble section, 9 St. Lorenzo Ruiz.</p>
    </div>

  </section>

  <!-- headstart section ends  -->


  <!-- background section starts  -->

  <section class="background" id="background">

    <h1 class="heading"> something <span>about</span> us </h1>

    <div class="row">

      <div class="image">
        <img src="images/about us.jpeg" alt="">
      </div>

      <div class="content">
        <h3>What makes us St. Lorenzo, a Lorenzo?</h3>
        <p>Some of us are blessed with inteligence, some of us are artists, musicians, singers, dancers, and many more. And Of course, hindi rin mawawala ang mga pasaway sa room, sometimes called as the geng geng boys ng lorenzo.</p> <br>
        <p>Above everything, we are all stil unique in different ways.</p>
      </div>

    </div>

  </section>

  <!-- background section ends  -->


  <!-- students section starts  -->

  <section class="students" id="students">

    <h1 class="heading"> the <span>students</span> of st. lorenzo ruiz </h1>

    <div class="row">

      <div class="column">
        <img src="images/lance.jpg" width="100%" height="100%" alt="">
        <h2>Acoba, Lance Julian</h2>
      </div>

      <div class="column">
        <img src="images/qatlyn.jpg" width="100%" height="100%" alt="">
        <h2>Altoveros, Qatlyn Rexi</h2>
      </div>

      <div class="column">
        <img src="images/justine.jpg" width="100%" height="100%" alt="">
        <h2>Asuncion, Justine Clyde</h2>
      </div>

      <div class="column">
        <img src="images/rhyeiza.jpg" width="100%" height="100%" alt="">
        <h2>Balmaceda, Rhyeiza Bless</h2>
      </div>

      <div class="column">
        <img src="images/rainier.jpg" width="100%" height="100%" alt="">
        <h2>Baltazar, Ranier</h2>
      </div>

      <div class="column">
        <img src="images/kimberly.jpg" width="100%" height="100%" alt="">
        <h2>Barakel, Kimberly Joy</h2>
      </div>

      <div class="column">
        <img src="images/harry.jpg" width="100%" height="100%" alt="">
        <h2>Bayang, Adrienne Harry</h2>
      </div>

      <div class="column">
        <img src="images/carla.jpg" width="100%" height="100%" alt="">
        <h2>Bautista, Carla Mae</h2>
      </div>

      <div class="column">
        <img src="images/jek.jpg" width="100%" height="100%" alt="">
        <h2>Carorocan, John Gerald *unable to find pictures*</h2>
      </div>

    </div>

  </section>

  <!-- students section ends  -->


  <!-- teachers section starts  -->

  <section class="teachers" id="teachers">

    <h1 class="heading"> the <span>teachers</span></h1>

    <div class="container">

      <div class="adviser">
        <img src="images/sireugie.jpg" width="20%" height="20%" alt="">
        <h2> Eugiemhar S. Videra </h2>
        <p> - Our one and only humble and loving adviser. Laging mabait, mainit lang ang ulo 'pag maingay ang lorenzo</p>
        <p> - Siya lagi nagpapa-ayos sa'min ng gym huhu</p>
      </div>

      <div class="comp">
        <img src="images/sirmacky.jpg" width="20%" height="20%" alt="">
        <h2> Macky Ibay </h2>
        <p> - Tatay ni vernix </p>
        <p> -Poging computer teacher</p>
      </div>

      <div class="science">
        <img src="images/sirvill.jpg" width="20%" height="20%" alt="">
        <h2> Villamor Toquero </h2>
        <p> - Pinaka mabait na science teacher</p>
        <p> - The best science teacher st. lorenzo ruiz could ever have</p>
      </div>

      <div class="english">
        <img src="images/sirace.jpg" width="20%" height="20%" alt="">
        <h2> Aceyork Claro </h2>
        <p> - Teaches english very well </p>
      </div>

      <div class="socsci">
        <img src="images/sirniño.jpg" width="20%" height="20%" alt="">
        <h2> Niño Jay Robles </h2>
        <p> - Magaling magturo ng economics (may natututunan) + hindi masyadong boring yun subject kasi siya yun nagtuturo</p>
        <p> - Poging SOCSCI teacher din</p>
      </div>

      <div class="religion">
        <img src="images/ma'amerika.jpg" width="20%" height="20%" alt="">
        <h2> Erika Silverio </h2>
        <p> - Pinaka-batang religion teacher</p>
        <p> - The best magturo ng religion</p>
      </div>

      <div class="filipino">
        <img src="images/ma'amalpha.jpg" width="20%" height="20%" alt="">
        <h2> Alpha Mariz Binala </h2>
        <p> - Filipino teacher na kakaiba ang humor</p>
        <p> - Laging lt sa subject niya (minsan lang magalit)</p>
      </div>

      <div class="mapeh">
        <img src="images/ma'amsab.jpg" width="20%" height="20%" alt="">
        <h2> Sabrina Tanya Santos </h2>
        <p> - Open-minded na MAPEH teacher</p>
        <p> - The best magpalaro ng PE</p>
      </div>

      <div class="tle">
        <img src="images/ma'amregina.jpg" width="20%" height="20%" alt="">
        <h2> Regina Mhae Naval; </h2>
        <p> - Soft TLE teacher</p>
        <p> - Cute magalit (normal lang tone ng voice niya kahit galit)</p>
      </div>

    </div>

  </section>

  <!-- teachers sections ends  -->


  <!-- diary section starts  -->

  <section class="diary" id="diary">

    <h1 class="heading"> fun <span>memories</span> of st. lorenzo ruiz</h1>

    <div class="row">

      <div class="column">
        <img src="images/feastday.jpeg" alt="">
        <h2>feast day of st. lorenzo ruiz</h2>
        <p>this was our first picnic and bonding with sir eugie and it was fun. lahat kami ay may dala-dalang sariling foods na pinagsaluhan, we all shared each other's food (busog much). medyo magulo lang kasi kulang yun banig, pero masaya. hindi rin mawawala
          yun kalokohan ng boy, nagtago sila ng shoes and nilagay pa sa bubong yun iba. hay nako lorenzo. it went well though, lahat kami nabusog.</p>
      </div>

    </div>

  </section>


  <!-- diary section ends  -->





  <!-- custom js file link  -->
  

</body>

</html>

javascript html css
1个回答
0
投票

我已经审阅了您的代码，该代码中有一个简单的小错误，即

.container
内的
.teachers
有
position: absolute
，这导致教师内容浮动在日记部分上方。

要解决此问题：

  • 只需从 
    position: absolute;
     中删除
    right
     和
    .teacher .container
    • 属性
  • 将宽度设置为从 
    90%
    到 
    100%

这是代码示例：

.teachers .container {    
    /* I have removed the position and right css property and set the width to 100%  */
    width: 100%;
    background-color: #04246b;
    padding: 110px;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.