Почему sticky-блок игнорирует координаты left и right?
Мне нужно растянуть блок поиска так, чтобы он был на всю ширину экрана. Этот блок помещен в main-контейнер с заданной шириной, видимо, поэтому не работает sticky-блок, однако, он же должен вести себя как абсолютно позиционированный блок и игнорировать родителя (в main контейнере position:relative не включен).
Как мне растянуть sticky-блок на всю ширину экрана?
/*блок родитель*/
.main {
width: 1280px;
flex-grow: 1;
margin: auto;
}
/* search box*/
.search-box {
border-bottom: 2px solid #ffffff;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
Ответы (2 шт):
Sticky-элемент, будет позиционироваться относительно ближайшего предка в контейнере прокрутки. Т.е. нам и не нужно было бы устанавливать position:relative для родительского элемента .main — он и так подпадает под эти условия, если является прямым родителем для .search-box в прокручиваемом элементе (документе).
Возможно, в вашем примере проблема вполне решается стилем .search-box {position:fixed}, но это не точно, т.к. html-код не показан в вопросе.
Sticky работает не только по вертикали, но и по горизонтали. Так что с помощью left и right его позиционировать нельзя - они будут влиять только на горизонтальную прокрутку. Если дефаултное размещение блока устраивает, можно заменить их на ширину. Если не устраивает, то делай через 2 вложенных блока.