Вопросы Теги

Переполнение CSS скрыто с абсолютным положением

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

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

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

39
задан David A 11 July 2010 в 23:47
поделиться

2 ответа

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

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

22
ответ дан 27 November 2019 в 02:10
поделиться

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

89
ответ дан 27 November 2019 в 02:10
поделиться