4

Я не могу разобраться, как переместить элемент, который находится под .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;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>

<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>

</div>
 Run code snippet

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

1

2 ответа 2

4

Я хотел бы добавить изображение снаружи и отрегулировать 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;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>

<div class="content-wrapper">
.content-wrapper

<div class="content-wrapper-inner">
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>

</div>

0

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

4
  • это переводной топик вопрос-ответ. Только приветствуется, если вы дадите свой полный ответ с кодом. Галочка и плюсы за хороший ответ с комментариями ждут вас. 13 мар 2019 в 17:03
  • ответ уже дан выше. Я просто внес дополнение чтобы показать автору принципы. 14 мар 2019 в 15:06
  • без кода это просто слова, хотите давать советы, давайте совет с помощью работающего кода. Если вы хотите посоветовать автору, перейдите по ссылке на Enso в авторский топик. 14 мар 2019 в 15:35
  • Что ж с вами сложно-то так... Повторяю: работающий код УЖЕ приведен в ответе выше, нет смысла его дублировать. Ответ "что делать" УЖЕ дан, мое дополнение отвечает на вопрос "почему надо делать так". В какое место я тут должен засунуть код? 15 мар 2019 в 16:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.