Как зафиксировать Div в середине экрана, но только в X-Plane?
Итак, по сути, мне нужен элемент div, который находится в середине экрана и зафиксирован там, но только по оси X, поэтому независимо от того, прокручиваю ли я влево или вправо, он остается в середине экрана, однако, когда я хочу прокрутите вниз. Я хочу, чтобы он прокручивался так же, как если бы он был относительным. Надеюсь, вы понимаете, что я имею в виду.
Это код, который я до сих пор добавлял для этого div, пытаясь добиться этого.
#header{
position:fixed;
top:0px;
left:50%;
margin-left:-100px;
width:200px;
height:160px;
}
В этом коде он зафиксирован как в плоскости X, так и в плоскости Y, поэтому при прокрутке вниз он остается в том же месте на экране и не исчезает, когда я прокручиваю вниз, как если бы он был относительным.
Обновлять
Это весь мой код с ответом. Перейдите в полноэкранный режим фрагмента, а затем сделайте окно достаточно маленьким, чтобы вам приходилось прокручивать изображение. И как только вы прокрутите достаточно вправо, заголовок переместится влево.
.text{
text-align:center;
}
#header {
position: sticky;
left: 50%;
width: 200px;
height: 160px;
/* left: calc(50% - 100px); */
transform: translateX(-50%);
}
#image{
position: relative;
display: block;
margin: auto;
width: 1200px;
height:600px;
z-index:2;
overflow:clip;
}
#div{
position: relative;
display:block;
margin: auto;
height: 600px;
width: 1200px;
border: 5px solid black;
background:linear-gradient(#1a1536,rgb(40, 9, 90), rgb(18, 29, 87),#1a1536);
z-index:1;
overflow:clip;
}<div id = "header">
<h1 class = "text">Title</h1>
<h3 class = "text">SubTitle</h3>
<h2 class = "text">SubTitle</h2>
</div>
<div id = "div">
<img class = "place" id = "image" src = "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconsdb.com%2Flight-gray-icons%2Fsquare-icon.html&psig=AOvVaw1fzZXNZn7_2YEF6WDUukgV&ust=1722012245418000&source=images&cd=vfe&opi=89978449&ved=0CA8QjRxqFwoTCPjMyNPRwocDFQAAAAAdAAAAABAE">
</div>@AHaworth Всегда пожалуйста. Мол, не появляется ли черно-фиолетовое поле со знаком вопроса? Если коробка есть, то пример моей проблемы все равно должен работать.
Ответы 1
Вы можете использовать фиксированную позицию, установив левую позицию на 50%, но не установив верхнюю позицию.
Вот простой пример:
<style>
body {
width: 300vw;
height: 300vh;
}
#header {
position: sticky;
left: 50%;
width: 200px;
height: 160px;
transform: translateX(-50%);
left: 50%;
background: blue;
}
</style>
<body>
<div id = "header">fixed div</div>
</body>Вы допустили опечатку сверху, сейчас всё работает без опечатки.
Привет, это была не опечатка, а способ убрать верхнюю настройку. Мне следовало использовать комментарий CSS! Сейчас удалено, так как важно то, что верх не должен быть установлен.
да, мб, я пропустил пост ОП. Я удалил свой пост, так как ваш лучше всего соответствует его потребностям.
Ваш код работает, однако левое поле больше не работает с позицией: липкий; поэтому он не полностью центрирован. Знаешь, как это исправить?
Приносим извинения, я отредактировал код для расчета левой позиции и сделал элемент цветным фоном, чтобы вы могли видеть, что он центрирован.
Это сработало! Большое спасибо!
Хорошо, то, что у вас есть, по сути, не работает полностью, потому что, когда я делаю экран достаточно маленьким и прокручиваю вправо, элемент div заголовка просто перемещается влево и не остается посередине. Итак, как мне это исправить?
Вы пробовали трансформировать перевод?
@AHaworth Я только что попробовал это, и он все равно делает то же самое. Я новичок в этом. Итак, чтобы не совершить ошибку, которую я совершил в прошлый раз, что мне следует сделать, чтобы вы все могли видеть больше моего кода, чтобы у вас было больше контекста, который мог бы мне помочь?
Я не понимаю, почему это не сработало. В фрагменте, который я только что отредактировал, это работает, чтобы сдвинуть элемент на половину его ширины, используя преобразование, а не -100 пикселей.
@AHaworth Я почти уверен, что теперь понимаю, почему твой работает. У вас прокрутка происходит из-за ширины области просмотра, однако у меня начинается, когда изображение становится слишком большим для экрана, тогда появляется полоса прокрутки. Итак, в вашем фрагменте вместо использования ширины области просмотра используйте изображение, чтобы появилась полоса прокрутки. Потом посмотрим, сработает ли это, потому что я в такой ситуации.
Можете ли вы добавить соответствующий код к своему вопросу? Я не могу угадать, какой код вызывает прокрутку! Создайте работоспособный фрагмент, который точно покажет проблему.
Спасибо за добавление работоспособного фрагмента, но я не вижу изображения.