[Solved] Absolute positioned div partially not visible

[Willem-Siebe]

Hi all, I never had a more difficult combat like this, working on it 1,5 days and still don’t understand what’s going wrong.

On the homepage here: http://keratinehaarproducten.nl/ you see 4 products with a SALE label attached to it. This sale label is absolute positioned, and the wsis-catalog-product-container div is relative positioned. The absolute positioned sales label has top and right position of -4px so that is goes outside of the surrounding relative div. This however is not working! See this image: http://wsinternetservices.nl/2014-08-08_09-49-16.jpg. The red parts is where the absolute div ‘dissapeares’.

I made a codepen here to mimic the situation best as possible, and there you see the absolute positioned div is fully visible: http://codepen.io/willemsiebe/pen/vDayz.

What is going wrong in my site?

Kind regards,

Willem

[Paulie_D]

I think the problem is the positin values you have used.

Try something more like this:

.sale-label {
background: black;
width: 130px;
right: -33px;
top: 21px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

[Willem-Siebe]

@Atelierbram, thanks for pointing me out to the errors, changed it!

@Paulie_D: changing it to top:21px you bring the ‘non-visible’ part inside the surrounding container and then it is visible, but the question is why it’s not visible outside that container since my CodePen shows that should be visible…

@Atelierbram: marglin-left to 19px is not a good idea then I loose the left-border of the first product, margin-top: 4px; I already discovered this makes the ‘unvisible part’ visible, but the question remains why this is neccesarry at all since the codepen shows this should not be done. Then still the rightside on the last product is not visible…

[Willem-Siebe]

@Soronbe: YOU ARE MY HERO! Thanks a lot.

Thanks Paulie and Atelierbram for also thinking with me (and pointing me out to the HTML problems).

[Author]

Posts