Как я могу предотвратить соскальзывание изображений с позиционированного блока со страницы? - PullRequest
Новая
       11

Как я могу предотвратить соскальзывание изображений с позиционированного блока со страницы?

0 голосов
/ 11 июля 2009

Когда я изменяю размер окна слишком маленьким, изображение скользит слева от страницы. Там нет никакого способа, чтобы даже перейти к нему. Что я могу сделать, чтобы изображение не соскользнуло со страницы? Проблема в абсолютных div, но я не знаю, как заставить их работать без них.

Код: 

<!DOCTYPE html>
<html>
<head>

<style>

body {
  margin: 0;
}
.chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

</style>

</head>
<body>

<div class="chart">
  <img src="Resources/chart.png" width="432" height="256" style="display: block; position: absolute; top: 50%; margin-top: -128px; right: 0;"/>
</div>

</body>

</html>

1: http://www.freeimagehosting.net/image.php?11b1fcb689.png>http://www.freeimagehosting.net/uploads/th.11b1fcb689.png

1 Ответ

1 голос
/ 11 июля 2009

Поместите его с помощью: 

.chart {position: relative; }

position:absolute; выводит его из потока документа, поэтому он не учитывается с полосами прокрутки. position: relative; удерживает элемент в потоке, так что вы все равно можете прокрутить его.

Редактировать

<час /> В ответ на комментарий Михаила:

Я бы хотел, чтобы оно было отцентрировано вертикально. Возможно ли это при относительном позиционировании?

Да, это так. И это включает в себя немного jiggery-pokery, но я использую FF3.0.11 / Ubuntu 8.04, поэтому странность может зависеть от платформы.

Сначала определите верхний левый угол позиционируемого элемента: 

.chart {position: relative;
        width: 50%;
        left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
        margin: 25% 0 0 -25%;
}

Чтобы объяснить поля:

Сначала я пытался использовать то же позиционирование, что и с position: absolute; (top: 50%; left: 50%;), но это не сработало. Я точно не знаю, почему, хотя подозреваю, что это связано с тем, как рассчитывается высота процента. Тем не менее, методом проб и ошибок (и именно поэтому я отметил свой браузер / платформу выше) обнаружилось, что 25%, похоже, поместили источник (верхний левый угол .chart) в нужное место.

Тогда 25% представляют только мое предположение о по вертикали в центре. -25% легче понять, это обычная вещь «горизонтальный центр минус половина ширины элемента». Хотя, возможно, вам было бы проще использовать width: 50%; margin: 0 auto;, чтобы добиться того же.

Я не понимаю, почему позиционирование с обычным top: 50% не сработало, но я использую таблицу стилей css-reset (в частности, таблицу стилей Эрика Мейера «reset reloaded», найденную здесь: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)

Стоит отметить, что страница отображается последовательно с Firefox в Midori (который, я думаю, использует движок рендеринга Webkit), и я скоро буду загружать демонстрационную страницу (до: http://www.davidrhysthomas.co.uk/so/rel-pos-centre.html) для общественности насмешки обзор различий.

А также, если бы кто-нибудь мог помочь и объяснить странность необходимости вертикального позиционирования с полями, а не top: xx, это было бы оценено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...