CSS - Overflow and Positioning

Question

I saw a similar post dealing with this issue, but my problem is a wee bit different.

In the issue outlined HERE, the concept is that an OUTER div be positioned relative, and the INNER div be positioned ABSOLUTE, and the overflow:hidden would be preserved.

My issue is that BOTH divs, INNER and OUTER are positioned absolute. How can I still preserve the overflow: hidden on the OUTER div?

Overflow: hidden should not be affected by the position of the element. Is there a problem? Do you have sample code to show? Ideally, you copy your code here, so that in the future this question has value even after the issue is resolved (for future visitors that find this post). — random_user_name, May 29 '14 at 16:13
I'm putting together a sample jFiddle, but I'm seeing exactly what you are talking about @cale_b. Both divs are absolutely positioned but the overflow:hidden is preserved. I must have a CSS conflict somewhere. — Murphy1976, May 29 '14 at 16:20

score 0 · Answer 1 · answered May 29 '14 at 16:25

Not sure of your question, but is that what you try to achieve? See this jsfiddle

CSS:

#outer {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 80px;
    width: 50px;
    overflow: hidden;
}

#inner {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 50px;
    width: 50px;
}

with the html:

<div id='outer'>
    <div id='inner'>
        // Your stuff here
    </div>
</div>

Eranga Kapukotuwa · Answer 2 · 2014-05-29T17:11:39.763

position: absolute;

If you apply position: absolute; to any block element(ex: div class="inner" ), the container block( ex: div class="outer" ) can't determine the dimensions of that element.

overflow: hidden;

Applying overflow: hidden; to any element means, it detect the real dimensions of that element. If that element have given dimensions( width: 200px; height: 200px; ) Overflow: hidden; determine the dimensions of the element as 200px,200px. If the element dose not specify the dimensions, Overflow: hidden determine the area of total ingredients as the dimensions of that element.

So in your case, You would apply a fixed width and a fixed height to your outer block. Otherwise you can't apply both overflow hidden, and position absolute to outter block in the same time.

If it is not possible to applying fixed width and height, css hs small tricks depending on the design. If you might explain the design more, I may explain more.

CSS - Overflow and Positioning

2 Answers2