Переполнение Скрыто для div внутри div

Question

У меня есть внешний div и внутри него, у меня есть изображение и еще один div. Теперь внешний div имеет определенную ширину и высоту и имеет overflow: hidden; Теперь мое изображение отлично работает, что означает, что даже если он больше, чем div, он не будет переполняться.

Проблема, с которой я столкнулся, заключается в другом div, который находится внутри внешнего div. Этот внутренний div находится над изображением, которое у меня есть. Но это все равно не показалось. Но после того, как я положил его на абсолютное. Он работал правильно.

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

• Почему не был внутренний показ ДИВ первоначально и почему я должен дать Див свойство position:absolute;?

• Почему мой внутренний div все еще отображается за пределами моего внешнего div, хотя мой внешний div имеет свойство overflow - hidden.

• Как скрыть свой внутренний div, когда он не находится внутри внешнего div. Теперь обратите внимание, что я не хочу, чтобы внутренний div фактически скрывался. Я просто хочу, чтобы это не было видно, если это не было в моем внешнем div.

Вот мой исходный код для справки:

• устанавливаемого сотовое свойство внешнего DIV:

  .banner { 
      width: 250px; 
      height: 500px; 
      overflow: hidden; 
      float: left; 
      margin-right: 20px; 
      cursor: pointer; 
  } 
  

• устанавливаемого сотовое свойство внутренней DIV:

  div.info { 
      position: absolute; 
      width: 250px; 
      height: 500px; 
      top: 0px; 
      opacity: 0.70; 
      -webkit-transition: -webkit-transform 300ms; 
  } 
  

Вот ссылка на jsfiddle http://jsfiddle.net/jMX3n/2/

Answer 1

Обновлено http://jsfiddle.net/Augustus06111993/Rkgfy/

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

Это говорит браузеру, что все, что собирается позиционироваться должны быть удалены из нормального потока документа и будет помещен в точное местоположение на странице. Он также выводится из нормального потока документа - это не повлияет, как элементы перед ним или после него в HTML расположены на веб-странице

Ваш внешний DIV и внутренний DIV есть такой же размеры .. Попробуйте изменить CSS внутренней DIV, как это, и вы можете увидеть изображение и ДИВ отдельно

.info { 
    width: 50%; 
    height: 50%; 
    float:left; 
    opacity: 0.70; 
} 

.image { 
    width:50%; 
    height:50%; 
} 

.outer { 
    width: 250px; 
    height: 500px; 
    overflow: hidden; 
    margin-right: 20px; 
    cursor: pointer; 
} 

Answer 2

В скрипке, средний ДИВ (.banner) не установлен, поэтому абсолютное позиционирование внутренний div (.info) относится к самому удаленному div (#banner), который имеет позицию, но не имеет overflow:hidden.

Поэтому, чтобы скрыть переполнение, добавьте overflow:hidden к самому удаленному div.

Answer 3

Найдено решение. Я удалил внешний div с идентификатором #banner. А затем до класса .banner, я добавил position: relative, а затем немного изменил div. По-видимому, у меня было несколько div, похожих на внутренний div, который я описывал. В моем классе .banner я добавил свойство float:left;. Переполнение работало должным образом. Вот новый код:

• DIV класс:

  .banner { позиция: относительная; верх: 100px; Слева: 250 пикселей; ширина: 250px; высота: 500 пикселей; переполнение: скрыто; float: слева; margin-right: 20px; курсор: указатель; }

• Внутренний DIV:

  div.info { позицию: абсолютная; ширина: 250px; высота: 500 пикселей; верх: 0px; Слева: -250px; непрозрачность: 0,70; -webkit-переход: -webkit-transform 300ms; }