CODEWITHSUNDEEP
htmlcss
xmaestro
xmaestro

Reputation: 1124

Absolute div within a overflow hidden relative div

I have this situation where i have structure like below

<div class="red">
   <div class="orange"></div>
</div>

And css as below

.red{
   height:200px;
   width:200px;
   overflow: hidden;
   position:relative;
   background:red;
 }

.orange{
   right: -50px;
   top: 50px;
   height:100px;
   width:100px; 
   position:absolute;
   background:orange;
 }

Problem i'm facing is that i need the .orange div to show fully but it shows partially because of the overflow on the .red div. And i know i can remove the overflow and it will work but overflow is for another feature that i need and i cannot remove it. Is there any way i can make the .orange div fully visible without removing overflow from parent div?

Here is a fiddle.

Upvotes: 1

Views: 1293

Answers (5)

Scott Weaver
Scott Weaver

Reputation: 7361

Breaking out of overflow:hidden

Basically, in order for an absolutely positioned element to appear outside of an element with overflow: hidden, its closest positioned ancestor must also be an ancestor of the element with overflow: hidden.

(edit) By omitting the position:relative from the parent, the orange box will be absolutely positioned relative to the <body> and can then be repositioned with some script: (or just manually position it)

css:
    red{
      height:200px;
      width:200px;
      overflow: hidden;
      background:red;
    }

//script
       var parent = $('.red');
       var inner = $('.orange');
       inner.css({
          left:parent.outerWidth()-inner.outerWidth()/2

see fiddle here

Upvotes: 1

Andrei Surdu
Andrei Surdu

Reputation: 2341

Try to add overflow hidden to pseudo-elements and remove it from .red selector. I think it should do the trick:

.red{
  height:200px;
  width:200px;
  position:relative;
  background:red;
}
.red:before,
.red:after{
    overflow: hidden;
}
.orange{
  right: -50px;
  top: 50px;
  height:100px;
  width:100px; 
  position:absolute;
  background:orange;
}

https://jsfiddle.net/Smartik/rmx1g66z/6/

Upvotes: 1

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

try with below code it may help you

.red{
  height:200px;
  width:200px;
  overflow: hidden;
  position:relative;
  background:red;
}
.orange{
  right: 0px;
  top: 0px;
  height:100%;
  width:100%; 
  position:absolute;
  background:orange;
}
<div class="red"><div class="orange"></div></div>

Upvotes: -1

Aaron Lavers
Aaron Lavers

Reputation: 986

Without any context of your overflow problem affecting other things, could you use specific overflow-x and overflow-y properties?

i.e.

.red {
  overflow-x: auto;
  overflow-y: hidden;
}

Upvotes: 0

PengLin.Zhang
PengLin.Zhang

Reputation: 36

An ugly solution

HTML

<div class="container">
    <div class="red"></div>
    <div class="orange"></div>
</div>

CSS

    .container{
        height: 200px;
        width: 200px;
        position: relative;
    }
    .red {
        height: 200px;
        width: 200px;
        overflow: hidden;
        position: relative;
        background: red;
    }
    .orange {
        right: -50px;
        top: 50px;
        height: 100px;
        width: 100px;
        position: absolute;
        background: orange;
    }

Upvotes: 0

Related Questions