I need to add new functionality to projekt. On top I have menu with z-index:999 (position:relative) ( I ty to reduce z-index but component is too extensive.
Lower I have my component and inside i have button that opens a modal.
And here's the problem
I have modal on sticky position (top, right, bottom, left - 0).I want this to cover the entire page.(z-index:99999)
But unfortunately the menu component is upper.
Do you have any idea how to fix this?
Thanks
Is there any overflow: hiddens? if so try removing those lines.
Okay, I fixed this. I needed to extract the component with the modal from the parent element.
Related
Difficult to explain so I made a fiddle...
As you can see when you press the button and toggle the span or notification the div or icon shifts to the left...
Is there any way in CSS to make the icon stay in place? I'm sure it's something simple that I'm overlooking or overthinking.. Thanks.
If you position your notification icon absolutely it won't take up any space.
Just change the positioning on .todoListNotification to absolute and change left to something like 15px.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I am having trouble with the scrolling when I use a position:fixed inside of another position:fixed. The simplest way to demonstrate this issue is with this fiddle:
http://jsfiddle.net/xDDJb/
I want to be able to scroll with the mousewheel while having the mouse over the smaller fixed div. I have to keep .wrapper the way it is (aka I cannot remove the position:fixed).
The context is that I'm using Bootstrap 3 modals and I want to essentially create this layout in the modal. The BS .modal class uses position: fixed and creates the same construct as the example's .wrapper.
I would love any suggestions please!
One option could be to use jQuery Mousewheel to catch scroll events on your fixed div and then pass them through. Not elegant, but might do the trick.
I'm creating a site where I have a a logo on the page that is static positioned as normal. However I have a jQuery plugin that converts it to a fixed positioned element as it hits the top of the screen when you scroll so that it sticks in place on top of a fixed position navigation bar. The problem I have is that while the logo is still static as it hasn't hit the top yet but is overlapping the navigation bar, it appears underneath the navigation bar.I have used the z-index on the logo to try and place it on top but I'm finding that this doesn't make a difference when used across static and fixed positioned elements at the same time.
Does anyone have a solution?
Edit: I thought I should mention that I have thought of a solution myself, to have the logo always fixed positioned and to adjust its position with javascript but I would like to fix this in CSS if possible.
Just add position: relative; to the styling for #logo. z-index only works on positioned elements. Tested it in jsFiddle and it seems to work.
Happy coding!
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I have sidebar on the left hand side of my webpage that is set to postion:relative with a top value set but it also has a z-index of 10 as the top part of the sidebar needs to overlap a portion of the content at the right that is also set to relative.
I then have my footer with no position set, but has a clear:both set, that sits underneath the sidebar, as the height of the sidebar is larger the my content div.
My question is, as the sidebar grows, it doesn't push the footer down with it but rather is rendered over the top of it - any ideas what I am missing?
Is it because my sidebar has a z-index of 10 - if so, how would I get it to push the footer down instead of rendering over the top of it?
If not, then what could it be?
Mmh z-index, positioned elements and stacking context are so fun :(
Here are good resources about z-index:
Teach yourself how elements stack (renamed in How z-index works!)
Understanding CSS z-index (MDC)
The first one will let you find the solution by yourself, even if it's by trial and error.
Not sure if this would work, but what happens if you set the same z-index for the sidebar and the footer?
Kill the top declaration for your #sidebar and figure out a different way of having that top space ( margin, padding )
If that doesn't work, please link us to code.