Position absolute vs overflow hidden

Question

Why my div positioned as absolute didn't get out of the flow and get hidden by a mom div her overflow set to hidden ? How can i show my div positioned to absolute ? here's a FIDDLE

HTML :

<div class="div1">
    <div class="div2">        
        <div class="div3">ccccc</div>
    </div>   
</div>

CSS :

.div1 {
    overflow: hidden;
    width: 60px;
    height: 20px;
    background-color: antiquewhite;
}

.div2 {
    position: relative;
}

.div3 {
    position: absolute;
    right: -10px;
}

Its not positioned as absolute. remove this -> right: -10px; — Mad Angle, Jun 05 '14 at 09:56
my friend i want a answer not change my default property because i know if i remove `right: -10px;` it works but in my big code i have to use this property like in the question — Hayi, Jun 05 '14 at 09:59

Fred · Answer 1 · 2014-06-05T10:09:32.460

0

Your problem is with your "div3" class.

Try this:

.div3 {
    position: absolute;
}

That should fit nicely.

Now if you want it to be centered, then just go:

.div3 {
    position: absolute;
    width: 100%;
    text-align: center;
}

EDIT: If you insist, then the easiest will be to have a counter on the same element. Try this then:

.div3 {
    position: absolute;
    right: -10px;
    padding-right: 10px;
}

Hope this helps.

edited Jun 05 '14 at 10:09

answered Jun 05 '14 at 10:03

Fred

2,402
4
31
58

no i want show the entire div3 in this possition `right: -10px;` – Hayi Jun 05 '14 at 10:05
@Youssef - So, in other words, the padding then needs to be equal and opposite to the amount of the 'right offset'. – Fred Jun 05 '14 at 10:15

Position absolute vs overflow hidden

1 Answers1