Страницы

Поиск по вопросам

воскресенье, 29 марта 2020 г.

CSS принудительный верхний z-индекс с родительским overflow:hidden

#html #css #css3 #z_index #overflow 


Я не могу разобраться, как переместить элемент, который находится под .content-wrapper{
overflow:hidden; .content{position:absolute;}на самый верх  

Рассмотрим скриншот ниже: 

  

Элемент изображения с фотографией человека размещается под элементом .content. 

Но часть его головы на фотографии, которая выделена желтым цветом (указывает красная
стрелка), скрыта из-за того, что родительский .content-wrapper имеет свойствоoverflow:
hidden  

Основная проблема в том, что я не могу изменить hidden: overflow на что-либо еще.    

Реально ли решить такую проблему без использования JavaScript?  

=== Дополнение 1 ====

Чтобы пояснить проблему, я составил фрагмент кода ниже:  



.wrapper{
  width:100%;
  overflow:hidden;
  position:initial;
  padding:0 10px;
  background-color:#EEEEEE;
  box-sizing:border-box;
}

.content-wrapper{
  position:relative;
  overflow:hidden;
  background-color:#DDDDDD;
  margin:10px 0;
  min-height:350px;
}

.content{
  background-color:white;
  position:absolute;
  top:30px;
  left:10px;
  right:10px;
  bottom:10px;
}

.content.grayed{
  background-color:#CCCCCC;
}

.content.positioned{
  top:50px;
  left:180px;
  bottom:-50px; //negative positioned parts supposed to be hidden
  right:-50px;  //as .content-wrapper has overflow:hidden;
}

.content.positioned img{
  width:40%;
  height:auto;
  margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
  margin-left:10vw;
  min-width:250px;
}


.wrapper


.content-wrapper


.content with cut off edges - that is supposed behaviour







.content-wrapper


.content



...and a man above is with sliced head - that is UNsupposed behaviour







 Run code snippet




Неужели нет никакого решения?


Ответы

Ответ 1


Я хотел бы добавить изображение снаружи и отрегулировать position, чтобы получить
это. Измените translation, чтобы настроить взаимное положение элементов:   



.wrapper{
  width:100%;
  overflow:hidden;
  position:initial;
  padding:0 10px;
  background-color:#EEEEEE;
  box-sizing:border-box;
}

.content-wrapper{
  overflow:hidden;
  background-color:#DDDDDD;
  margin:10px 0;
}

.content{
  background-color:white;
  position:absolute;
  top:30px;
  left:10px;
  right:10px;
  bottom:10px;
}
.content-wrapper-inner {
  min-height:350px;
  position:relative;
  background-color: red;
}

.content.grayed{
  background-color:#CCCCCC;
}

.content.positioned{
  top:50px;
  left:180px;
  bottom:-50px; //negative positioned parts supposed to be hidden
  right:-50px;  //as .content-wrapper has overflow:hidden;
}

.content.positioned img{
  width:40%;
  height:auto;
  margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
  margin-left:10vw;
  min-width:250px;
}


.wrapper


.content-wrapper


.content with cut off edges - that is supposed behaviour







.content-wrapper





.content



...and a man above is with sliced head - that is UNsupposed behaviour






.content



...and a man above is with sliced head - that is UNsupposed behaviour









Ответ 2


Дополню.
Всё, что находится внутри элементов с overflow:hidden, будет обрезано его краями.
И никак иначе. Исключение - выпадающая часть