Требуется статическое меню при переполнении-x: прокрутка

#css-position

#css-позиция

Вопрос:

У меня есть четыре встроенных изображения, которые расширят ширину моего мобильного браузера. Под ними, на левом поле, у меня есть меню с внутренними ссылками на каждое изображение. Все это работает, и нажатие на четвертую ссылку прокручивает окно просмотра до самого дальнего правого изображения.

Я бы хотел, чтобы меню оставалось расположенным на левом поле, но оно прокручивается за пределы экрана, следуя за левым полем. Я пробовал position: fixed и absolute, но он не останется фиксированным, как при использовании фиксированной прокрутки вверх и вниз.

     <style>
    img {border:blue solid thin; width:100%;  }

    .scroller {display:inline; max-width:180px;  white-space:nowrap; 
    text-align:left; }
    </style>
    </head>
    <body>

    <div style="position:absolute; top:0; left:0;">

    <div class="scroller" style="">
    <div style="display:inline-block; height:300px; border:red solid thin;">
         <img src="car_1.gif" id="1" >
    </div>
    <div style="display:inline-block; height:300px; border:red solid thin;">
        <img src="car_2.gif" id="2">
    </div>
    <div style="display:inline-block; height:300px; border:red solid thin;">
         <img src="car_3.gif" id="3">
    </div>
    </div>

   <div style="position:absolute; top:330px; left:0; padding:20px; 
    border:solid green thin;">
       <a href="#1">one</a>
       <a href="#2">two</a>
       <a href="#3">three</a>
    </div>
    </div>

Ответ №1:

Вы можете использовать позицию: фиксированную или абсолютную позицию, тогда меню будет статичным, оно не будет перемещаться.