Переполнение CSS скрыто с абсолютной позицией - PullRequest
Новая
       0

Переполнение CSS скрыто с абсолютной позицией

37 голосов
/ 12 июля 2010

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

<html>
<body>
  <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

Итак, я хочу, чтобы правый край логотипа не отображался. Идеи?

Ответы [ 3 ]

85 голосов
/ 12 июля 2010

Попробуйте добавить position: relative к вашему внешнему div. Это позволит расположить изображение относительно этого div (с учетом стиля переполнения) вместо относительно страницы.

Пример: 

<html>
<body>
  <div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

Посмотреть на JS Bin

19 голосов
/ 12 июля 2010

Поскольку контейнер изображения расположен абсолютно, он находится вне потока «содержащего» элемента div.

Вы можете либо динамически позиционировать, либо динамически изменять размеры абсолютно позиционированного элемента div., с jQuery.

0 голосов
/ 06 февраля 2014

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

<html>
<body>
  <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...