Почему раздел моего дневника (5-й) появляется/работает в разделе моих учителей (4-й)? ⇐ CSS

[Anonymous]

Я все еще новичок в HTML, CSS и JavaScript. Я посмотрел урок на YouTube и решил попробовать, я добавил несколько изменений, и он работал нормально, пока раздел дневника не начал появляться в разделе учителей, который является совершенно другим разделом.
Это раздел учителей (раздел учителей). Но, как вы можете видеть (раздел дневника), изображение, которое я поместил в раздел дневника, появляется под разделом учителей, за элементами раздела учителей.
Я думал, что проблема в том, что тег раздела. Я попробовал переписать код в разделе дневника, но это все равно не решает проблему.
Это код:

Код: Выделить всё

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;
}

Код: Выделить всё

DEAR ST.  LORENZO RUIZ















[url=#]
[img]images/lsclogo.png[/img]
[/url]


[url=#headstart]headstart[/url]
[url=#background]background[/url]
[url=#students]students[/url]
[url=#teachers]teachers[/url]
[url=#diary]diary[/url]
[url=#memes]memes[/url]
[url=#group]group[/url]















Dear St. Lorenzo Ruiz
Warm greetings from the one and only humble section, 9 St. Lorenzo Ruiz.









 something about us 


[img]images/about us.jpeg[/img]

What makes us St. Lorenzo, a Lorenzo?
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.

Above everything, we are all stil unique in different ways.











 the students of st.  lorenzo ruiz 


[img]images/lance.jpg[/img]
Acoba, Lance Julian

[img]images/qatlyn.jpg[/img]
Altoveros, Qatlyn Rexi

[img]images/justine.jpg[/img]
Asuncion, Justine Clyde

[img]images/rhyeiza.jpg[/img]
Balmaceda, Rhyeiza Bless

[img]images/rainier.jpg[/img]
Baltazar, Ranier

[img]images/kimberly.jpg[/img]
Barakel, Kimberly Joy

[img]images/harry.jpg[/img]
Bayang, Adrienne Harry

[img]images/carla.jpg[/img]
Bautista, Carla Mae

[img]images/jek.jpg[/img]
Carorocan, John Gerald *unable to find pictures*











 the teachers


[img]images/sireugie.jpg[/img]
 Eugiemhar S. Videra 
- Our one and only humble and loving adviser. Laging mabait, mainit lang ang ulo 'pag maingay ang lorenzo
- Siya lagi nagpapa-ayos sa'min ng gym huhu

[img]images/sirmacky.jpg[/img]
 Macky Ibay 
- Tatay ni vernix
-Poging computer teacher

[img]images/sirvill.jpg[/img]
 Villamor Toquero 
- Pinaka mabait na science teacher
- The best science teacher st.  lorenzo ruiz could ever have

[img]images/sirace.jpg[/img]
 Aceyork Claro 
- Teaches english very well

[img]images/sirniño.jpg[/img]
 Niño Jay Robles 
- Magaling magturo ng economics (may natututunan) + hindi masyadong boring yun subject kasi siya yun nagtuturo
- Poging SOCSCI teacher din

[img]images/ma[/img]
 Erika Silverio 
- Pinaka-batang religion teacher
- The best magturo ng religion

[img]images/ma[/img]
 Alpha Mariz Binala 
- Filipino teacher na kakaiba ang humor
- Laging lt sa subject niya (minsan lang magalit)

[img]images/ma[/img]
 Sabrina Tanya Santos 
- Open-minded na MAPEH teacher
- The best magpalaro ng PE

[img]images/ma[/img]
 Regina Mhae Naval; 
- Soft TLE teacher
- Cute magalit (normal lang tone ng voice niya kahit galit)











 fun memories of st. lorenzo ruiz


[img]images/feastday.jpeg[/img]
feast day of st. lorenzo ruiz
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.

Подробнее здесь: https://stackoverflow.com/questions/783 ... section4th