Панель навигации HTML5 не липнет к плавающим объектам

Моя панель навигации выглядит так:

ul#navigation {
    font-size: 1em;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #824c71;
    position: sticky; /*<-!*/
    top: 0;
}

И теперь у меня на странице есть несколько плавающих элементов, стилизованных под этот:

<div style="width:50%;background-color:#e6c79c;margin:3%;float:left;padding:1em;">

и рядом с ним (так как он плавает слева) вот этот:

<div style="width:flex;background-color:#e6c79c;margin:3%;float:right;padding:2em;padding-top:1em;text-align:center;position:sticky;">

Я попытался создать 1. липкую панель навигации, которая остается липкой при прокрутке над плавающим элементом div. С моей настройкой он липкий, пока не коснется плавающего элемента. 2. два липких элемента на одной странице. Второй элемент, который перемещается вправо, должен прилипать к панели навигации при прокрутке (возможно, на безопасном расстоянии 1em :))

Было бы здорово, если бы кто-нибудь помог мне увидеть мою ошибку. Заранее спасибо, ура!

Изменить: я делаю это для проекта, в котором разрешены только HTML и CSS .. не спрашивайте ..


html sticky css-float
person Mella 30    schedule 14.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите, чтобы панель навигации всегда оставалась «липкой», используйте свойство css display: fixed; вместо липкого. Здесь есть ссылка, которая показывает различия между свойствами отображения. Положение залипания переключается между фиксированным и относительным в зависимости от положения прокрутки. Фиксированная панель навигации будет все время находиться вверху, и вы можете использовать свойства top, bottom, left, right, чтобы разместить фиксированную панель навигации там, где вы хотите, на странице.

person Dylan Davenport    schedule 14.01.2018