position: fixed;

[wicked_kiD]

Добрый день, необходимо сделать меню, которое плавает вдоль левого края контейнера, все бы ничего, но сайт адаптивный и когда окно браузера становится меньше основной ширины контейнера - с этим справляются @media, а как сделать чтобы позиция отсчитывалась от центра страницы или от контейнера, чтобы при больших и разных экранах меню оставалось на своем месте, возле контейнера? Буду благодарен за любую информацию.

Нашел решение при помощи calc(); но, судя по заявленным данным о поддержке браузерами - не так много поддерживают эту функцию, может есть более правильное решение?

Edited April 3, 2013 by wicked_kiD

[Zippovich]

ну если контейнер имеет position: relative и меню внутри контейнера в DOM и имеет position: fixed или position: absolute, то меню привязано к контейнеру и будет реагировать на изменение его размера

[wwt]

http://jsfiddle.net/cV7GE/

как пример привязки к родительскому элементу.

Никогда такой задачи не стояло, а вот сейчас попробовал, есть огрехи:

1. если указать top и left, браузер в независимости от relative у родителя начинает позиционировать от окна браузера.

2. в chrome в любом случае позиционирует от окна браузера, а IE9 и FF без указания top и left нормально отобразили.

Как я понимаю это не победить без js. Во всяком случае я пока кроссбраузерного решения без него не вижу .

Edited April 3, 2013 by wwt

[Great Rash]

Так вроде вся суть position: fixed; в том чтобы расположить элемент относительно окна браузера.

[wicked_kiD]

В общем я сделал так, если кому интересно:

Вынес див за контейнер, добавил ему

@media(min-width:1250px){
.sidemenu {
    left: calc(50% - 600px);
    position: fixed;
    top: 200px;
    width: 100px;}
}

А когда @media(max-width: 1250px) я переношу этот див просто над контейнером.

Вроде все работает в лисе последней и хроме, но судя по странице htmlbook.ru/css/calc опера и сафари не поддерживают, пока нет под рукой их, надо будет протестировать. Если будет в последних работать, думаю поставить заглушку, с ссылками на свежие версии браузеров, т.к. использую много свойств, которые не так давно поддерживаются.

[Great Rash]

calc - плохо, на андроидах не работает, в Опере не работает, в старых ИЕ не работает. Используйте лучше скрипт.

[Zippovich]

можно привязать абсолютно к контейнеру и повесить событие на скролл, что бы менять топ по окну броузера.

[wicked_kiD]

Спасибо за отзывы всем - у меня необходимость в calc исчезает при экранах по ширине меньше 1250px, поэтому врятли много устаревших браузеров будет на таком разрешении (в т.ч. андроид и прочие мобильные), а скрипт не хочу цеплять потому, что в моем проекте итак очень много js. Но если возникнет в ходе эксплуатации такая необходимость - то придется еще один скрипт цеплять...