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

Я ударился головой об этом. Я хочу абсолютную позицию изображения, которое я буду перемещать в 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>

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

Ответ 1

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

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

Ответ 2

Попробуйте добавить 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

Ответ 3

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

<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>