CODEWITHSUNDEEP
htmlcsspositionoverflowcss-position
Zanic L3
Zanic L3

Reputation: 1088

CSS - Element overflowing/overlapping this parent div while still staying overflow:hidden;?

Here is my mockup (=design) what I want to achieve in code.

By parent div I mean that both the <h1> and .slider_dots are nested inside the div .slider

mockup

Okay so here is the tricky part, I know I can easily fix this by using .slider { overflow: visible; } then the text will overlap the parent div .slider but when I do this I get that you can see the other slides next to it (like u can see on the img below). Because it's a slider it needs to be .slider { overflow: hidden; }

overflow: visible;

.slider { overflow: hidden; } and then giving a negative value to the (pushing it up). It just dissapears inside the parent div .slider like so.

enter image description here

Anyone knows how I can do a workaround this? I tried working with overflow-x and overflow-y but they don't seem to work.

I've uploaded a live version here on my hosting (third page) incase you want to play/try something. I can upload it to a jsfiddle if needed as well although it's a ton of code.

(If the text is strike-through that means you are viewing it on a bad viewport, try dragging your window down it's only now written for phone/tablet size.)

Slider used.

Upvotes: 2

Views: 740

Answers (1)

anon
anon

Reputation:

You need to add another inner element to your slider. That way, you can pad it at the top, and apply your background. You can then pull your content back up, overlapping the background. That way you can apply your overflow as usual, whilst also no longer cropping the text.

Upvotes: 1

Related Questions