CSS forced top z-index with parent overflow:hidden

Question

I can't sort out how to move the element, which is placed under .content-wrapper{ overflow:hidden; .content{position:absolute;} }, to the very top.

Consider a screenshot below:

An image element with man photo is placed under the .content element. But the part of his head on photo, which is highlighted with yellow (pointed with red arrow) is hidden due to the parent .content-wrapper has an overflow:hidden property. The main problem is that I can't change the hidden overflow to whatever else.

Is that actually real to solve such a problem without using a JavaScript?

==== Supplement 1 ====

To clarify the problem, I've made up a code snippet below:

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

Is there really no any solution?

Mahogany

As long as you use overflow hidden, no script will overcome that, if the photo stays as a child of course, so if you post a minimal working code snippet reproducing the issue, we most likely can help you get rid of the overflow: hidden – Ferreby

@LGSon , I have added a code snippet with small example. Could you, please, review it? – Mahogany

@Mahogany did you ever get this sorted? It is breaking my heart 💔 been stuck on it for three days, maybe it is impossible – Jonna

@peterflanagan Oh I only noticed now that the question is too old :) probably the OP will no more need this ... – Subjunctive

Answer 1

I would consider adding the image outside and adjust the position to obtain this. Change the translation to adjust the position:

.wrapper {
  width: 100%;
  overflow: hidden;
  position: relative; /*change this*/
  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: 0;
  right: 0;
  padding: 20px calc(40% - 0.4*148px) 0 20px; /* the space of the image*/
}

.content.positioned img {
  position: absolute;
  opacity: 0; /*Hide this one*/
}

.hack {
  /*Don't use any top/bottom here !!*/
  left: 190px;
  right: 10px;
  position: absolute;
  z-index: 1;
}

.hack img {
  width: 40%;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(70%);
  max-width:300px;
}

<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="hack">
    <img src="//i.imgur.com/DsOdy1V.png">
  </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>

Subjunctive

Answer 2

Add a <div> like content-wrapper-inner and move the height, position from content-wrapper into it.

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

Ivaivah

it seems there is a major issue in your code .. did you forget something? It's scrambled when I run it – Subjunctive

Answer 3

Try to make overflow:visibleof the outer div of the content.

Apparitor

Did you miss The main problem is that I can't change the hidden overflow to whatever else? – Ferreby

Answer 4

You can't have content reach out of a parent with overflow: hidden and still find a way to show the head. The question is why you need overflow hidden on the parent.

Perhaps you could use a sibling element for the image container and limit overflow on the content container.

Something like:

HTML

 <div class="parent">
   <div class="child-content-wrapper">
     Content goes here
   </div>
   <div class="child-image">
     Image goes here
   </div>
 </div>

CSS:

 .parent {
    position: relative;
 }

 .child-content-wrapper {
    overflow: hidden;
 }

 .child-image {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
 }

That should work and you'll be able to get the cut off effect on the rotated content box and the whole head.

Endocranium