#html #css #position #css-position
#HTML #css #положение #css-позиция
Вопрос:
У меня есть фиксированная панель навигации в мобильном режиме просмотра, сайт прокручивается по горизонтали. Тот же код работал на другой html-странице с почти идентичной структурой div. У меня возникла одна основная проблема на этой странице — исправленный навигационный контейнер не исправлен после первой страницы, а иногда и во втором разделе страницы или ‘#about. Я попытался добавить ‘fixed’ в HTML-код навигации, но он все еще не работает. 
HTML
<nav class="nav-container">
<div class="mobile__header-controls" style="position: fixed">
<div class="mobile__nav">
<button class="mobile__more"> </button>
<div class="mobile__process-nav">
<a href="#show" data-tab-target="#show" class="mobile__tab">Show</a>
<a href="#about" data-tab-target="#about" class="mobile__tab">About</a>
<a href="#researchFilm-ba" data-tab-target="#researchFilm-ba" class="mobile__tab">Research Film</a>
<a href="#stills-ba" data-tab-target="#stills-ba" class="mobile__tab">Stills</a>
<a href="#lookbook" data-tab-target="#lookbook" class="mobile__tab">Lookbook</a>
</div>
<div class="mobile__main-nav">
<a class="mabtn" style="text-decoration: underline;" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn" href="/BA.html">BA</a>
</div>
</div>
<a href="/index.html" class="info-back">Back</a>
</div>
</nav>
<main>
<div class="tab-content animate__animated animate__fadeIn">
<div id="show" data-tab-content>
<div class="video-wrapper">
<video id="catwalk" playsinline autoplay loop preload="metadata">
<source src="/img/BA/Samson Leung Dear you, he said - CSM BA Fashion.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="about" data-tab-content>
<div class="about-text black-text">
<div class="proj-header fade-in">
<p><b>
I realise i didn’t had the luxury of creating a home video as a kid, hence I wanted to
use this opportunity to present my collection in the form of a film.
</b>
</p>
</div>
<div class="about-body">
<p class="fade-in">
Based on the feeling of overwhelmed, I redirected the emotion into a mood film I shot in Japan
named <b>“Dear You”</b>. My project follows the sequel, a second narrative film shot in Hong
Kong
named
“Paper Boys” which follows a “paper” boy who felt overwhelmed and decided to leave his life
behind, however after reaching the epiphany (explosion), he realises in the end that he is still
very much a papery boy at heart. Collaborated with friends at the Royal College of Music, we
composed a poetic soundtrack specifically for my body of work. These films serve as a form of a
self portraiture.
</p>
<p class="fade-in">
In traditional Chinese self portraiture, Shan Shui painting or geology were used
as a form of metaphor of self reflection, hence being inspired by He Jian Chen’s paintings of
rock,
it provides the mood I wanted to achieve within the plot. With the inspiration of the granular
texture from the film, as well as surface texture of the rock, I develop my own material: slime,
a
malleable material that when cool, stays stiff and when it’s steamed, it’s soft as leather
and can be mould and stitched.
</p>
<p class="fade-in">
Texture and grain was explored through several textile techniques, screen printing and spray
paints in order to achieve the gradual change in grains and texture within the collection. I
also
developed an oil paint print transfer technique that allows me to build layers of colours and
opacity and transfer onto the surface any fabric as well as my slime. Although the collection is
mostly worn by men, it primarily focuses on women’s garment details.<br><br>
I hope that as the model walks down the runway, when they are photographed or
filmed, the image will present itself as a still from the “film.” Hence creating a moving film
gallery. The catwalk itself results in the third sequel of my film series.
</p>
</div>
</div>
</div>
<div id="researchFilm-ba" data-tab-content>
<div class="video-wrapper-ba black-text fade-in">
<p>Dear You (2017)</p>
<video class="mood2" loop video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
preload="metadata">
<source src="/img/BA/dear you,.mp4" type="video/mp4">
</video>
</div>
<div class="video-wrapper-ba black-text fade-in">
<p>Paper Boys (2018)</p>
<video class="mood" loop video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
preload="metadata">
<source src="/img/BA/Paper Boys.mp4" type="video/mp4">
</video>
</div>
<div class="credit-ba">
<button class="credit-icon">(...)</button>
<div class="credit-text">
<p>
Thank you
to my team of helpers
<br><br>
and the following
<br><br>
Collaborators<br>
<br>Film produced with Taka Hata
<br>Accessories produced by Kristy Fan
<br>Soundtrack composed by Zacharias Wolfe
and Friends at Royal College of Music
<br><br>
Look Book
<br>Make Up by Kristina Pavlovic
<br>Look Book photographed by Simonas Berukstis
<br>Slime Making photographed by Oliver Vanes
<br><br>
Show
<br>Internal Show Make Up by Phoebe Walters
<br>Press Show Make Up by Mariko Yamamoto
<br>Supported by L’Oréal Professionnel
<br><br>
Models
<br>Yota Hoshi
<br>Masato Funaoka
<br>Ryan
<br>Youtian Zhang
<br>Tien Ai Guan
<br>Xander Ang
<br>Wing Fung
<br><br>
and the BAFCSM team</p>
</div>
</div>
</div>
<div id="stills-ba" data-tab-content>
<div class="stills">
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/01.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/02.jpg" alt="still back">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/03.jpg" alt="still FRONT">
<img class="back-img" loading="lazy" src="/img/BA/stills/04.jpg" alt="still back">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/05.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/06.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/07.jpg" alt="still 4">
<img class="back-img" loading="lazy" src="/img/BA/stills/08.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/09.jpg" alt="still 5">
<img class="back-img" loading="lazy" src="/img/BA/stills/10.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/11.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/12.jpg" alt="still back">
</div>
</div>
</div>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<img src="/img/BA/lookbook/17.jpg" id="lastClone" alt="">
<img src="/img/BA/lookbook/01.jpg">
<img src="/img/BA/lookbook/02.jpg">
<img src="/img/BA/lookbook/03.jpg">
<img src="/img/BA/lookbook/04.jpg">
<img src="/img/BA/lookbook/05.jpg">
<img src="/img/BA/lookbook/06.jpg">
<img src="/img/BA/lookbook/07.jpg">
<img src="/img/BA/lookbook/08.jpg">
<img src="/img/BA/lookbook/09.jpg">
<img src="/img/BA/lookbook/10.jpg">
<img src="/img/BA/lookbook/11.jpg">
<img src="/img/BA/lookbook/12.jpg">
<img src="/img/BA/lookbook/13.jpg">
<img src="/img/BA/lookbook/14.jpg">
<img src="/img/BA/lookbook/15.jpg">
<img src="/img/BA/lookbook/16.jpg">
<img src="/img/BA/lookbook/17.jpg">
<img src="/img/BA/lookbook/01.jpg" id="firstClone" alt="">
</div>
</div>
</div>
</div>
</main>
CSS
.nav-container {
position: fixed;
}
.mobile__header-controls {
display: block;
}
.mobile__header-controls a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.5rem;
text-decoration: none;
color: black;
text-transform: uppercase;
transition: all 1s;
}
.mobile__more {
font-size: 2rem;
margin: 2rem;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.904)
}
.mobile__process-nav {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 30vh;
background-color: rgba(255, 255, 255, 0.904);
color: black;
border: 2px solid black;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
}
.mobile__process-nav.fade {
opacity: 1;
}
.mobile__process-nav a {
margin-left: 2rem;
margin-right: 2rem;
}
.mobile__main-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
height: 25vh;
position: absolute;
margin-left: 5vw;
margin-top: 35vh;
margin-bottom: 0;
}
.mobile__main-nav a {
background-color: rgba(255, 255, 255, 0.904)
}
.info-back {
position: absolute;
margin-left: 80vw;
margin-top: 53vh;
margin-bottom: 0;
background-color: rgba(255, 255, 255, 0.904)
}
/* main {
background-color: pink;
} */
.tab-content {
overflow-y: none;
}
.control {
display: block;
left: 77vw;
}
#show {
width:100vw;
height: 100vh;
}
#about {
width:100vw;
height: 100vh;
overflow: scroll;
}
.proj-header {
margin-top:3rem;
padding:0;
width: 80vw;
text-align: center;
/* border: 1px solid black; */
}
.about-text {
flex-direction: column;
text-align: none;
/* overflow: scroll; */
}
.about-text p {
padding: 1.5rem;
width: 70vw;
}
.about-body {
border: 2px solid black;
flex-direction: column;
justify-content: flex-start;
overflow: scroll;
height: 50vh;
padding: 1rem;
margin-top:0;
text-align: left;
}
#researchFilm-ba {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.video-wrapper-ba {
width: 90vw;
margin-right: unset;
margin-top: 5vw;
padding: 0;
}
.credit-ba {
display: flex;
flex-direction: column;
position: absolute;
width: 30vw;
height: 5vh;
margin-left: 60vw;
}
.credit-icon {
margin-top: -9vh;
align-self: flex-end;
}
.credit-text {
background-color: rgba(255, 255, 255);
margin-left: -20vh;
}
.credit-text p {
width: 60vw;
height: 68vh;
}
#researchFilm p {
font-size: 1rem;
}
#stills {
width:100vw;
overflow: scroll;
}
#stills-ba {
width:100vw;
overflow: scroll;
}
.stills {
width: 100%;
height: auto;
flex-direction: column;
overflow: scroll;
}
.still-wrapper-ba {
width: 100%;
height: unset;
}
#lookbook {
width:100vw;
height: 100vh;
}
.credit:hover .credit-text {
display: block;
}
.lookbook-nav {
margin-top: 10vh;
}
.lookbook-nav button {
font-size: 3rem;
}
.lookbook {
display: flex;
justify-content: center;
align-items:center;
width: 90.5vw;
}
.slider {
margin-top: 12vh;
display: flex;
width: auto;
height: 40vh;
}
Ответ №1:
Включите это в свой CSS, это не позволит панели навигации перемещаться, даже если вы прокрутите веб-сайт вниз
.nav-container {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
Ответ №2:
Все, что вам нужно сделать, если я правильно понял ваш вопрос, это сделать это :
.nav-container {
top: 0;
position: fixed;
Вы должны указать верхнее, нижнее, левое или правое поле в основном, любого расстояния, которое вы хотите, а не только 0.
Комментарии:
1. позиция: фиксированная и липкая, всегда требуется спецификация полей. как и z-index, для работы всегда требуется свойство position.
2. оооо, я попробую это сейчас
3. По-прежнему не будет исправлено: (будет загружено изображение
4. вот страница, она отображается как в вашем редакторе? codepen.io/cornel777/pen/GRZxPYY
5. да, в code pen навигация остается фиксированной, но не отображается в локальной сборке, у меня есть много кода, который я не смог загрузить, чтобы не раздувать запрос