https://codesandbox.io/s/64mwo66znr
I would like the z-index of a the selected element to be higher than all other elements, however only the "settings" element's z-index is always higher despite some of the few methods i've tried.
So when i click on either home or settings, the selected div should come out on top.
Related
I have a situation where I have a dropdown (a) inside a dropdown (b) etc for a possible 5 levels.
Dropdown (a) is way to tall to fit into the screen, so I applied a overflow-y:scroll and a height of 450px which works well on the dropdown (a)
But when I open a sub or contained dropdown inside dropdown (a) and it is longer than 450px (which is the height of (a)) it does not show the entire dropdown (b).
I understand that this is how it probably should work, but I need a work around and I dont know enough of css to create this.
In the example bellow Admission in Dropdown (a)
and caller is dropdown (b) which you can see from my art work is dropping off the bottom of the bottom.
max-height
css property instead of height.
I'm having an issue with this site:
https://connectiveworldenergy.com/
At the top of the page, there is some text saying "Design a happy life and create a stress free path that you've always dreamed of.
Let us show you how!". It is a clickable link.
On FireFox and IE, the link is not clickable.
I think it might have something to do with z-Index. The menu is overlapping on top of it. I've tried adjusting Z-index but haven't had luck. So then I read about z-index and it appears z-index requires elements to have the same "position"
The elements on top of it are transparent background... not sure why it's not clickable.
You have two elements: .cwe-ribbon (your clickable link) and `#top-header' (the rest of your header).
You gave #top-header a z-index of 100 so .cwe-ribbon (your clickable link) will need to be greater than this to sit on top of the other element (and be clickable).
set the z-index of .cew-ribbon to 101. In order for z-index to work you need to give the element a position so go ahead set it to position: relative.
We have a site under development. The menu bar is fixed to the left hand side of the page. When the window size is reduced to a height of approx 700px, parts of the menu are no longer visible, so we need to make this scrollable vertically.
When we add
overflow-y: scroll;
to .main-header the area is now scrollable, but the hover over sub-menu's are cut off.
Any help greatly appreciated. The development site is here: http://washingtongroup.sbcomms-dev.co.uk/
The problem seems to be arising because your container is set to overflow-y scroll and your overflow-x is hidden, which is making your hover state clip on the horizontal. To avoid this you need to set your overflox-x to visible BUT according to the W3c: https://www.w3.org/TR/css3-box/#overflow-x
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
So in effect, if you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto, which is in turn creating the clipping.
It seems to me you have to implement a different layout strategy, as your header area is position:fixed with a defined width. If I were you I would set the 'header' area back to position static and let the menu scroll with the rest of the page.
Here is a visualization to see more context to show that the current approach you have will not work without drastically changing your layout approach:
http://www.brunildo.org/test/Overflowxy2.html
First off, please let me say I'm pretty new to CSS. Still lots to learn! I'm working on a site at https://web.archive.org/web/20130709112702/http://www.thesweet-spot.com/test77
Everything is working great, EXCEPT that the main content box is being placed under the fixed-position logo instead of over it, even though the z-index on the logo is lower than the z-index on the content box. What can you geniuses tell me?
There's actually two reasons:
Its parent is set to show up behind the logo. Any z-index applied to elements within that parent element will only apply to other elements within that parent. All the elements within the parent will be stacked accordingly, then that entire element will be put behind the logo as specified by its stack order.
A z-index only applies to elements with position of absolute, fixed, or relative. It does not apply to elements with static position.
It is constrained by the parent container's z-index. You cannot set a child to a higher z-index than the parent; it caps at the parent's value.
You could make the stripes a background of the body tag and then set the container to have no background. Once that is done set container to a higher z-index.`
I have a GWT application that has a left-hand scrollable navigation panel with a directory tree. I would like to be able to keep the panel narrow with a scroll bar at the bottom (which I have) but show the entire file name on hover, overflowing over the vertical scrollbar and into the next panel. I could do it by overlaying a small div with the full name when hovering, but that seems klugey and prone to subtle visual errors. I've tried fiddling with visibility, wrap and z-index with no effect. Can I do this by just adjusting the CSS parameters of the item in question, or on some other not-so-klugey way?
IntelliJ does this in the right way, but they're not in a browser:
Thanks,
-Lars
I think you'll have to go with an overlay. If the labels are inside a div then that div will control the overflow, and there's no way to specify different overflow values for different children.
You could copy all of the styles from your label onto your new overlay div at runtime to avoid having to duplicate all your styling. I'd probably give up on having the outline box only around the overflow (around "esponse" in your example picture). That seems hard.
Unfortunately, It can't be done in HTML. according to the spec..
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.