With CSS move an element outside of a container that uses overflow

Question

I have this structure below, basically a wrapper and a content divs, then i'm using CSS overflow so the content can scroll vertically when overflows.

But, I have a span that is inside the content and i want to move it out using position: absolute but the span is hidden once its out of the content due to the overflow property.

.wrapper {
    width: 300px;
    background-color: #2f4050
}

.content {
    position: relative;
    height: 170px;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e1ecf4;
    color: #404040;
}

.tit {
    position: absolute;
    top: 0;
    right: -40px;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #07c;
    color: #fff;
    z-index: 999;
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri, te dicam contentiones mei, eam dicta inermis dissentiet eu. Usu ne malis minim reprimique, aeque audire sadipscing cu eos, et nihil latine qui.Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri</p>
    <span class="tit">Move this span outside</span>
  </div>
  
</div>

Any workaround tricks here?
Note: Editing the html is not an option

check this : https://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent — Taki, May 01 '18 at 18:31

score 3 · Accepted Answer · edited May 01 '18 at 21:29

Move the position:relative to the wrapper like so:

edit: Position absolute is only relative to the first parent element with Position relative. If you wanted to make it relative to the entire page you can use position: fixed as well as an alternative.

.wrapper {
    width: 300px;
    background-color: #2f4050;
    position: relative;
}

.content {
    height: 170px;
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #e1ecf4;
    color: #404040;
}

.tit {
    position: absolute;
    top: 0;
    right: -40px;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #07c;
    color: #fff;
    z-index: 999;
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri, te dicam contentiones mei, eam dicta inermis dissentiet eu. Usu ne malis minim reprimique, aeque audire sadipscing cu eos, et nihil latine qui.Lorem ipsum dolor sit amet, at vix dicunt aliquam dignissim. Bonorum assentior liberavisse mei et. Recusabo moderatius in pri</p>
    <span class="tit">Move this span outside</span>
  </div>
</div>

With CSS move an element outside of a container that uses overflow

1 Answers1