In the image above, list of blocks has a maximum height with overflow-y: scoll. However, when the more icon is clicked, I want the dropdown to come over everything and ignore the max height of parent div.
Is it possible with css?
Your popup is likely an absolutely positioned element, and absolutely positioned elements are children to their nearest non-static (relative or absolute) positioned parent. If that parent has an overflow: hidden/scroll/whatever style on it it's going to cut off the child element regardless of what you set the child's z-index to.
You need to remove position: relative/absolute from the scrollable parent div and put it on the next grandparent div, then the child element won't be affected by the parent div's overflow style, however you may have to change your positioning calculations for the child if its parent has changed.
Relevant article here.
Related
I got a DIV in my HTML-Markup, which is positioned relative. The DIVs inside this container are absolute.
this destroys the complete layout, because the following HTML-Elements are now positioned wrong, the (above) DIV which is relative, overflows them...
but why? How can I fix it?
Once you position a container with :relative, everything inside it will be positioned in relation to that. The position:absolute pulls the child elements out of the flow of the page an positions them at the top of the container with position:relative.
Thus, once you have elements with position:relative, you will want to also add rules to move and position the child elements. Consider using left: and top: or right: and bottom to position your :absolute child elements.
Alternatively, you might try to position the child elements with :relative as well, if you don't want them pulled out of the flow of the page.
Do you have code to look at, or a jsfiddle? Otherwise it's difficult to know what's going on and to suggest a fix.
If your relatively-positioned element only contains absolutely-positioned elements, you need to give it a height setting, otherwise it will have zero height (the absolutely-positioned elements won't be counted for auto height), and therefore probably cause some overlapping with subsequent elements.
I have a parent element with some child elements. The child elements have a min-width set, but the parent does not. When the browser window is smaller than the min-width, the child elements are the correct width, but the parent keeps getting smaller, causing the children to overflow. Is it possible to force the parent to be at least as wide as the children? (without using javascript)
http://jsfiddle.net/Psczr/
(drag divider most of the way to the right and then scroll right in the result window)
Set the min-width on the parent and on the child inherit ... but the parent of the td in your script is not the div but the tr ... the parent of the tr is the table ... and the parent of the table is the div.
http://jsfiddle.net/Psczr/12/
Your issue in this situation is that you're using a relative width for the parent and a fixed min width for the children. The solution you're trying to handle is not possible in straight CSS. You should instead use relative widths for all elements or establish a fixed min width for the parent.
This question goes to the css wizards. I've googled this and couldn't find an answer.
At this point I'm not sure it's possible:
How do I specify the position of an element within another element, semi-absolutely so to speak?
I want to say "Put element inner x pixels to the right of outer's left border, no matter where outer happens to be at the moment."
This might be possible with javascript, but shouldn't it be possible with css?
#inner {
position: absolute;
left: 10px;
}
What this CSS actually does is position the #inner element 10px from the left border of its 'closest' parent that is has a position value of absolute, relative, or fixed. If no such element is found, it is absolute positioned relative to the body element, but if you make sure that the inner element has a parent that has its position defined with CSS, it will be positioned absolutely within that parent.
Take a look at this JSFiddle. First, look at the html and CSS to see how it was constructed, then go ahead and use your mouse to drag either of the element around (that's what the javascript in their does, its purely for demonstration purposes). Notice how when you drag the outer element, the inner one moves with it? All you are doing when you drag the elements around is changing the values of their top and left properties, and since its parent is absolute positioned, the child element will stay at the same spot within it no matter where you move it on the screen. :D
Absolutely, it's easy! All you have to do is specify the parent to have a position (either relative or absolute) and then the absolutely positioned child will be positioned "relative" to the closest positioned parent.
Confused?
I'm having trouble with some css.
Here's the fiddle: http://jsfiddle.net/bkVDH/
I'm trying to make #window's height stem from what's in .content. .content is absolutely positioned, but in a way that you can figure out the height of .wrap if you know the height of the content div. The same is true between .wrap and #window, so I was hoping that since .content has a height due to what's inside of it, #window would to, but it's not working.
Is this solvable?
Absolutely-positioned children go out of the normal flow an cannot affect parent's height, sorry.
The point of absolute positioning an element is to take it out of the flow of the document, i.e. stop it from affecting its parent element, sibling elements, etc.
What reason do you have for absolutely positioning .content?
Having a strange issue in IE7. In a number of spots, I have a DIV which has position: absolute on it (faux dropdown) whenever there is something behind it which has position: relative the relative positioned item will show through the other div.
Relativly positioned item does not have any z-index set, while the absolutely positioned item (the one I want on top) has a z-index of 1000.
http://skitch.com/louiswalch/dub5h/microsoft-windows-vista
I suspect you've already tried it, but set a z-index on your relatively positioned element that's lower than your absolutely positioned element's z-index as the first test.
If that doesn't work, you need to make sure both elements are in the same stacking context. In IE, whenever you apply the position CSS rule to an element, it generates a new stacking context within that element. That means that z-index will only be properly respected within that element's children and children in other stacking contexts with lower z-indexes may still stack above.
In your case, you either need to put the dropdown and button in the same stacking context or apply z-index to the 2 elements that are generating their separate stacking contexts.