I'm wracking my brain over this and can't figure it out. I have overlapping DIVs but I cannot get the submit button (login) to be on top.
http://swaptoria.com/
You'll see on the right there is the login button and a DIV from the main area thats preventing the button from being clickable.
Any advice would be most appreciated!
Your login button's position is static so its z-index wont be considered, change it to position: relative; z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Related
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.
I'm working on a mobile navigation option for my site and want it to slide from the right.
Here's a mockup:
https://codepen.io/rctneil/pen/OqzBjX
The issue I have is that by default the page scrolls over to the right when the nav is hidden.
I've tried adding overflow: hidden to .mega-wrapper which stops this scroll, but also hides the navigation when the toggle button is clicked.
Any ideas?
Kind regards,
Neil
I think that adding overflow: hidden was a good step. But after that you need to positioned absolute the mega-wrapper__mobile-nav and translateX the mega-wrapper__wrapper and mega-wrapper__mobile-nav
I made a demo
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'm having issued with the z-index property on a little chatbox that I've been working on.
http://codepen.io/anon/pen/uLDBp
Both elements are positioned aboslutley, and the only way to get the hide button to position itself behind the chatbox is to give it a z-index of -1, however that makes it un-clickable.
Any help would be appreciated.
I think this person has addressed your problem in an elegant manner
Overlapping div making links unclickable
Another optional solution I came across that seemed created was setting the button behind and then put another div element on top of both of them with a transparent background that can handle your clicks
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).