Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a calendar at the following page:
http://www.plumgrid.com/calendar/category/events/2016-03/?tribe_events_cat=events&tribe-bar-date=2016-03
When we mouseover the event on March 2nd "OpenStack Meetup | Washington, DC", the popup goes behind the header banner image.
I have looked into the z-index and the opacity, and tried to figure out whats going wrong in terms of stacking order and context but cannot find a solution.
Any ideas?
It's simple, you have an overflow hidden on the div with id "main"
So even with a z-index, the div is hidden when outside the box (try commenting the line 7743 of style.css)
For z-index to have any effect on stacking, the element should have the attribute position to relative or absolute.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I have a display grid with multiple rows and multiple columns, I am trying to make a div display when I hover over one of the grid boxes, but right now it is being cut off by a grid row. I want it to lay over the design.
I have tried position: absolute and z-index, but that does not seem to work. What other ideas can I try?
in addition to using absolute and z-index you should probably position the div you want to display over the others in the largest parent div. If you are able to provide your html and css I can be more precise
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I can't seem to figure out how to get the leaf image in my footer to have a higher z-index (I tried in the inspector, not in my stylesheets). I'd like it to be on top of the section above it and on top of the section below it. I'd be willing to change it to an pseudo element if that would work better.
https://bhr-caterers.nk-creative.com/
for it to be appeared on top of the section above you don't need to change the z-index, because your element is after the above element. you just have to let it show the overflow content so add
overflow:visible
to footer tag with this classes: "fusion-footer-widget-area fusion-widget-area"
for the section below it you need to add
z-index: 1
to the footer tag with id: "footer".
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am creating a dashboard and in the dashboard I got two boxes that I wanted have in the same level at the top. I am using the display "inline-block" to group them in boxes; however, the result is different instead the bottom part is in the same level but the top is not. See screenshot below:
https://www.mediafire.com/convkey/8e14/xdh672yojc8owe86g.jpg
I set the height of each box to "auto". You can see on the screenshot that the first box is not aligned equally to the second box, is there a way to have the two boxes in the same level or aligned equally at the top? I tried using table-cell display but it has compatibility issue on other browsers such as IE. Thanks
Use the verical-align: top; CSS property on the element which contains your inline-block elements. ;)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
My wordpress menu is underneath the elements in the body of the page, when it shouldn't be.
I have checked the z-index over and over again.
The elements in the menu have a z-index of 99 and the elements in the body don't have a z-index value. So in theory the menu should be over lap the elements in the body of the page, but it does.
So if it's not the z-index then that is it?
Note: I know people always want to have some code pasted in the question but the css is 1969 lines long and I don't know which part of that is wrong. And I'm not going to paste 1969 lines into this question.
okay here is the solution
move to the file http://www.kodemagd.de/wp-content/themes/spun.2.0.2/spun/style.css?ver=3.9.1
go to 889 line and find
.hentry
just remove
position: relative
from this and then check the output
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In my attempt to be terribly clever and have my #secondary sidebar sit on top of the slideshow on my homepage, I have somehow made the area dangle over the #wrapper on all the secondary pages. Have added a removed a whole bunch of div tags, nudged things around and tried everything else I can think of. Anyone have a suggestion how to fix this?
This is the homepage: http://emgraphics.net/joyful/ and the sidebar dangles on any other page (the shame!) Thanks!
You won't have a problem once you add content to those pages, though. Not sure what the issue is. An absolutely positioned element is taken out of the document flow, so the wrapper will not take any notice of the sidebar. You could alternatively float it and give it a negative top margin on the home page.