Изображение перемещается вперед на панель навигации при активации преобразования. ⇐ CSS

[Anonymous]

Я написал этот код:
HTML:

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

Phone Tales














Phone Tales


[url=Ar/Index.html]العربية[/url]





[img]Images/Image1.png[/img]




Mobile phones are the essence of life.


We cannot deny that mobile phones have become an integral part of our daily lives. They connect us
to the world, provide us with tools to organize our personal and professional lives, and offer us
information and entertainment anytime, anywhere. Do you think our increasing reliance on mobile
phones affects the quality of our lives? 🤔






[img]Images/Image3.png[/img]




The history of the phone.


Imagine that in 1876, Alexander Graham Bell invented a simple
telephone that could transmit sound over wires. This invention changed the world, and communication
was no longer limited to written letters or personal meetings. Over the years, the telephone
evolved, transitioning from a heavy, stationary device to a large mobile phone in the 1980s. Then
came smartphones, which pack incredible computing power.

Now, the smartphone is not just a tool for voice communication; it is also a hub for personal
management, entertainment, and social interaction.  It allows us to keep up with our work, shop,
learn new skills, and even monitor our health.

But, despite all these benefits, the question remains: Have phones made us more connected or more
isolated? Have these small devices become a blessing that enhances our lives, or a curse that
distances us from reality?




The Phones

CSS:

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

* {
transition: all 0.5s !important;
font-family: "Zain", sans-serif;
font-weight: 400;
font-style: normal;
}

a:hover, button:hover {
transition: none !important;
background-color: rgba(128, 128, 128, 0.5) !important;
}

body {
margin: 0;
padding: 0;
}

nav {
height: 50px;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 30px;
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
position: fixed;
width: 98vw;
}

a {
padding: 10px;
border-radius: 10px;
}

.lalezar-regular {
font-family: "Lalezar", system-ui !important;
font-weight: 400;
font-style: normal;
}

.Regular {
text-decoration: none;
color: currentColor;
}

nav .Regular {
margin-left: 10px;
margin-right: 10px;
}

.leftdiv {
float: left;
}

.rightdiv {
float: right;
}

h0point5 {
font-size: 2em;
}

nav h0point5 {
cursor: pointer;
position: relative;
top: 5px;
}

.flex {
display: flex;
}

section {
padding-left: 10px;
height: 100vh !important;
align-content: center;
}

.s1 {
align-items: center;
justify-content: center;
}

#s1-vertical {
background-color: black;
border-radius: 5px;
border: none;
height: 400px;
width: 5px;
margin-left: 10px !important;
margin-right: 10px !important;
}
.s2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Images/Image2.png');
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: white;
}

#s2-vertical {
background-color: white;
border-radius: 5px;
border: none;
height: 600px;
width: 5px;
margin-left: 10px !important;
margin-right: 10px !important;
}

.s3 {
justify-content: center;
text-align: center;
}

.s3 h0point5 {
font-size: 60px;
}

#PhonesContainer {
display: flex;
height: 0;
width: /*80%*/ 0;
border-radius: 20px;
border: 2px black solid;
margin: auto;
overflow-x: scroll;
overflow-y: hidden;
}
#PhonesContainer::-webkit-scrollbar {
display: none;
}

JavaScript:

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

window.addEventListener("scroll", function() {
if (this.scrollY > 1200) {
this.document.getElementById("PhonesContainer").style.width = "80%";
this.document.getElementById("PhonesContainer").style.height = "400px";
this.document.getElementById("PhonesContainer").style.borderColor = "black";
} else {
this.document.getElementById("PhonesContainer").style.width = "0";
this.document.getElementById("PhonesContainer").style.height = "0";
this.document.getElementById("PhonesContainer").style.borderColor = "transparent";
}

if (this.scrollY >  715) {
this.document.getElementById("s2-container").style.transform = "scale(1)";
} else {
this.document.getElementById("s2-container").style.transform = "scale(0)";
}
});

Но когда я запускаю код и прокручиваю до 715:
[img]https://i. sstatic.net/Y7sDeTx7.png[/img]

Изображение становится над панелью навигации!
Когда при прокрутке веб-сайта появляется контейнер, он становится выше навигация, и я хочу, чтобы она вышла за пределы навигации, и та же проблема возникает на другом веб-сайте, который я создал, когда наводил курсор мыши на кнопку:


Часть кнопки появляется над панелью навигации, потому что я изменил преобразование: масштаб (1.5) При наведении курсора.
Есть ли решение этой проблемы?

Подробнее здесь: https://stackoverflow.com/questions/791 ... -activated