Плавающие элементы вправо, избегая полос прокрутки - PullRequest
Новая
       19

Плавающие элементы вправо, избегая полос прокрутки

1 голос
/ 29 июля 2011

Я пытаюсь переместить элемент прямо за пределы содержимого главной страницы и хочу, чтобы горизонтальная полоса прокрутки не обрезала его

Пример http://www.warface.co.uk/clients/warface.co.uk/test

Я заметил, что это было достигнуто в нижнем колонтитуле, но не могу понять, как http://www.webdesignerdepot.com/

HTML 

<div class="wrapper">
    wrapper

<div class="imageright">
    </div><!-- imageright END -->

</div><!-- wrapper END -->

CSS 

.wrapper {
    background: yellow;
    margin:0 auto;
    max-width: 1140px;
    height:500px;
    }

.imageright {
    background: aqua;
    width:520px;
    height:285px;
    display:block;
    position: absolute;
    float:right;
    right:-100px;
    }

Ответы [ 2 ]

1 голос
/ 29 июля 2011

position: absolute; и right:-100px; выдвигают ваш элемент за правый край области просмотра.Плавающее не влияет на абсолютно позиционированные элементы.

Если вы хотите, чтобы элемент находился на расстоянии 100px от края, сделайте это положительным 100px.Или, если вы хотите, чтобы оно было прямо напротив края, сделайте его 0.Если вы действительно хотите использовать его, удалите абсолютное позиционирование.

Надеюсь, я понял вопрос и надеюсь, что это поможет!

Редактировать: я перечитал вопрос и думаю, что еще лучшеРешение было бы добавить position: relative; в оболочку.Прямо сейчас, ваш абсолютно позиционный элемент позиционируется относительно области просмотра.Если вы зададите относительное позиционирование wrapper, это приведет к позиционированию imageright относительно wrapper.

0 голосов
/ 29 июля 2011

Вы можете применить overflow:hidden; к телу, именно так вы получаете то, что вы ищете, но это крайне нежелательно.Другой способ вывести div из потока - сделать его position: fixed;, но это будет означать, что он будет виден при прокрутке вниз.

...