Сделайте объект привязанным к верхней правой части страницы

Я добавил знаменитую ленту "Fork me on Github" к одному из моих проектов. Тег выглядит следующим образом:

<a href="#" onclick="location.href='https://github.com/Nurdok/htmlify'; return false;">
    <img style="position: absolute; top: 0; right: 0; border: 0;"
     src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
     alt="Fork me on GitHub">
</a>

Это выглядит великолепно, но некоторые из div на моей веб-странице имеют минимальную длину, поэтому, когда окно мало, нужно горизонтально прокручивать экран. Когда это произойдет, я хочу, чтобы ссылка "Fork me on Github" придерживалась правой верхней части страницы, а не окна. Вот как это выглядит прямо сейчас:

Прокручивается до упора влево:

Прокручивается до упора вправо:

Кажется, что лента помещается в верхнюю правую сторону исходного окна и остается статической. Я хочу, чтобы это было вне поля зрения в первом случае и сверху-справа во втором случае (когда я прокручиваю вправо).

Изменить: Спасибо за быстрые ответы, люди. Однако в большинстве ответов лента прокручивалась по горизонтали и вертикали со страницы. Я хочу, чтобы это было исправлено в верхней правой части страницы (а не в браузере) и видно только в том случае, если я перейду туда, где находится его позиция.

Ответ 1

Вы можете сделать небольшой трюк и поместить свое изображение в div с минимальной шириной.

<div style="position:relative;min-width:960px">
 <img src="..." style="position: absolute;right:0;top:0" />
</div>

и поместите этот div в начало раздела <body>.

position:relative делает, что все дочерние элементы из этих элементов, которые имеют position:absolute, позиционируются как абсолютные в соответствии с , которые div, а не целая страница. Когда область просмотра больше, чем min-width, div имеет ту же ширину, что и область просмотра. Когда окно просмотра меньше, div будет иметь минимальную ширину, а изображение останется в углу div.

Ответ 2

Две альтернативы

Приклеивание к экрану просмотра. Чтобы привязать его к окну просмотра, вы должны поместить свой элемент "fixed" вместо "absolute"

<img style="position: fixed; top: 0; right: 0; border: 0;"

Приклеивание к контейнеру. И если вы хотите, чтобы он был прикреплен к контейнеру (так что вы не видите его при просмотре слева), используйте абсолютное значение, но выполняйте эту позицию контейнера: относительный, чтобы его содержащий блок направлена

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

Я использовал квадрат div вместо изображения. CSS следующим образом:

#container {
   width: 700px;
   height: 700px;
   background: #55ff90;
   position: relative;
}

#image {
   width: 70px;
   height: 60px;
   background: #ffff90;
   position: absolute;
   top: 0px;
   right: 0px;
}

Ответ 3

В случае, если он должен придерживаться только правой вершины только в горизонтальной прокрутке, вы не можете выполнить это с помощью базового CSS. Ваше требование придерживается правой верхней части для горизонтальной прокрутки, но не вертикальной прокрутки. Первая часть требования может быть выполнена с помощью position: fixed;, хотя это нарушает вторую часть.

Как насчет того, чтобы всегда придерживаться правой верхней части сайта с помощью относительного поплавка: Fiddle

<div id='container'>
    <div id='sticky'>x</div>
</div>

#sticky { 
    width: 100px; 
    height: 100px; 
    background: red; 
    float: right;
}

#container { 
    width: 100%; 
    height: 200px; 
    background: blue; 
}

Ответ 4

Вы должны использовать float:right, настроив margin, если вам нужно, например: margin-right: 5px. Приветствия.

Ответ 5

Если я правильно понимаю, что вы хотите, вы хотите, чтобы изображение было привязано к верхнему углу окна. ДОЛЖНО окно становится определенным (горизонтально), а затем придерживаться.

Если это так, то здесь есть правдоподобное решение:

body{
    min-width:1000px; /* or whatever you need it to be */
}

#ribbon{
    position:relative;
    float:right;
}

DEMO FIDDLE

DEMO FULLSCREEN

Вы также можете использовать контейнер div с min-width, ваш выбор.

Ответ 6

Измените position: absolute; на position: fixed.

В качестве примечания добавьте стиль a вместо изображения и добавьте z-index, чтобы убедиться, что он остается поверх всего остального:

<a href="#" onclick="location.href='https://github.com/Nurdok/htmlify'; return false;" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
    <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" 
     alt="Fork me on GitHub">
</a>