0

First time here, bear with me :)
I've searched numerous times for an answer but nothing I've found actually solved my problem.

I have a div that is overflow-y: scroll; overflow-x: hidden; nested in another div.
The nested div contains other div elements with images that are transform: scale(2); on hover.
Problem is- the items won't breach the "Overflow" definition and are cut by the containing div.

This is how it looks: Image is cut by div

Containing div CSS:

.CatPnl {
position: relative;
background-color: #8BB2C5;
padding: 8px 5px 0px 0px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
box-shadow: 2px 1px 4px 1px #053655 inset;}

Inside Element which is scalled up on hover:

.imgItem {
width: 49.6px;
height: 49.6px;
transition: all .2s ease-in-out;
margin: -3px 1px 1px 2px;}

.containdiv:hover> .imgItem {
 transform: scale(2);
z-index:9;
}

I've tried z-index on hover, it didn't help so far.
Any help will be appreciated!

Improve this question
7
  • 2
    from the W3C z-index explanation Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). so maybe try adding some "position: relative" to the .containdiv:hover > .imgitem Commented Oct 27, 2015 at 19:48
  • Please post your HTML. Try creating a Jsfiddle/Codepen/etc as well. Commented Oct 27, 2015 at 19:48
  • Not sure if position:relative would break the overflow:hidden, but position:absolute inside a position:relative surely would. Commented Oct 27, 2015 at 19:57
  • @PhilipBroadhead Thanks. That is correct, but only when the nested item is "absolute" as it seems. Unfortunately I cannot use this type of position in that case. Commented Oct 27, 2015 at 21:25
  • @Lowkase - it will be ab issue since I'm using asp.net and C# to create this page. This is not a simple HTML that I can simply paste in. Commented Oct 27, 2015 at 21:26

1 Answer 1

Reset to default
2

Because the container is positioned (position: relative;) all elements within it will be positioned based on that context. Essentially, the position relative is creating a layer that it's children will live within. No matter how high of a z-index you apply to a child, it will never extend beyond the bounds of that layer.

To illustrate, I've created a fiddle that shows how it can work, though this is not a direct answer to your problem.

http://jsfiddle.net/gzywzkep/

The problem in my fiddle is that I have to use position: absolute on the child node, so it pulls it out of its context an into a new layer, which kind of causes it to overlap the other elements. Note that the container element doesn't have any position property applied.

While this isn't a complete answer, I wanted to share so you could perhaps work out a solution based on it.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! I can see that removing the position: relative; from the containing div does the trick indeed, but adding an absolute position to the elements nested in that div is an issue, since they all overlap each other that way. I won't be able to set up position for each, since these are created dynamically.
Yeah, no prob. I see no reason why you couldn't add a simple single line of JavaScript that attaches an event listener to the resize/orientation events which merely calculates the outer height of the divs and adjusts the CSS style position on them. I realize you're trying to accomplish this with CSS only, so I don't want to dissuade you. Take this answer as a starting point and see if you mess around until you achieve it. You might even be able to get away with only scaling such that it doesn't extend past the container's padding or trying an alternative approach instead of scaling.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.