html - CSS forced top z-index with parent overflow:hidden -

i can't sort out how move element, placed under .content-wrapper{ overflow:hidden; .content{position:absolute;} }, top.

consider screenshot below:

an image element man photo placed under .content element. part of head on photo, highlighted yellow (pointed red arrow) hidden due parent .content-wrapper has overflow:hidden property. main problem can't change hidden overflow whatever else.

is real solve such problem without using javascript?

==== supplement 1 ====

to clarify problem, i've made 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 hidden    right:-50px;  //as .content-wrapper has overflow:hidden;  }    .content.positioned img{    width:40%;    height:auto;    margin-top:-40vh; //but not supposed 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> cut off edges - 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 man above sliced head - unsupposed behaviour  </div>  </div>    </div>

is there no solution?

try make overflow:visibleof outer div of content.