CODEWITHSUNDEEP
htmlcss
Nippledisaster
Nippledisaster

Reputation: 298

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

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

Upvotes: 3

Views: 2296

Answers (1)

Michael Sorensen
Michael Sorensen

Reputation: 2124

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>

Upvotes: 3

Related Questions