"позиция: липкая"; элементы не совсем совпадают

Так что я веду наш дрянной школьный веб-сайт для учащихся. Лето только началось, так что я много работаю над ним. У меня есть три тега кнопки, и все их позиции установлены как липкие. Когда я прокручиваю вниз, они выстраиваются вровень с верхней частью страницы (потому что я установил top: на 0px;). Но когда страница прокручивается вверх, они смещаются примерно на два пикселя сверху. Но это очень очевидно, и я думаю, что это выглядит некрасиво. Между ними тоже большой интервал. Было бы неплохо избавиться от этих двоих. Первая кнопка выстраивается так, как я хочу. Он просто содержит текст. Два других, которые не выстраиваются в линию, имеют вокруг себя элементы и содержат изображения. Я думаю, вот почему, но я изо всех сил пытаюсь решить проблему. Я публикую это поздно ночью, поэтому я не могу проверить ответы еще 10 часов или около того. Но было бы неплохо получить некоторую помощь, спасибо.

PS, адрес моего сайта https://jeffthecow.com/ Класс всех трех кнопок — «openbtn».

Попробуйте заставить их выстроиться внутри одного <div>, а затем установите этот <div> на position: sticky. (В худшем случае это означает упрощение вопроса.)

— 29.05.2019 05:19

Пожалуйста, добавьте сюда осмысленный код и описание проблемы. Не просто ссылайтесь на сайт, который нужно исправить — в противном случае этот вопрос потеряет всякий смысл для будущих посетителей, как только проблема будет решена или если сайт, на который вы ссылаетесь, недоступен. Публикация минимального, полного и проверяемого примера (MCVE), демонстрирующего вашу проблему, поможет вам получить более точные ответы. Дополнительные сведения см. в разделе Что-то на моем веб-сайте не работает. Можно просто вставить ссылку на него? Спасибо!

— 29.05.2019 05:24

Я согласен с @Ry-, но причина вашей проблемы в том, что первая кнопка - это элемент кнопки, а два других - это элементы "a", которые оборачивают кнопку. Поэтому, если вы оставите его в той структуре, в которой он есть, вам нужно применить стиль к обертке, чтобы убедиться, что они находятся в том же месте, что и голая кнопка. Тем не менее, нет причин для того, чтобы они находились в элементе a - вы можете удалить это и применить обработчик кликов непосредственно к кнопкам, и, как сказал @Ry, поместите их все в одну оболочку и примените к ней прилипание.

— 29.05.2019 05:24

Спасибо @Ry, я поставлю вокруг них какой-нибудь контейнер. :D

— 29.05.2019 17:24

html css

29.05.2019 05:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, благодаря @Ry я нашел решение. Мой код выглядит так:

.openbtn {
  white-space: nowrap;
  font-size: 25px;
  background-color: #333;
  text-align: left;
  top: 0px;
  color: lightgrey;
  border: none;
  height: 45px;
  z-index: 99999;
}

<div style = "
    height: 45px;
    position: sticky;
    border-bottom: 2px solid lightgrey;
    border-top: 2px solid lightgrey;
    width: fit-content;
    top: 0;
">
  <button class = "openbtn" title = "Open Menu" onclick = "openNav()" style = "
    float: left;
">&#9776;</button>

  <a target = "popup" style = "padding: 0px;" onclick = "window.open('https://jeffthecow.com/webchat/','name','width=510,height=412')"><button class = "openbtn" title = "Open Chat" style = "/* align-self: stretch; */float: center;"><img src = "https://jeffthecow.com/assets/images/Svg-Chat.webp"></button></a>

  <a href = "#scrollBtnLocation"><button class = "openbtn" title = "Back To Top" style = "
    float: right;
"><img src = "https://jeffthecow.com/assets/images/ScrollTop.webp"></button></a>
</div>

Also, it doesn't quite look right if you run the snippet, but you get the idea. Pretty much, I took the three buttons, and wrapped them up nice and tight in a div element, and set the div's position to sticky.