I've got a div which has another div drop down below it, but the drop-down appears below the content that's below it, and I want it to appear above it.
I've tried using z-index by setting a lower z-index for the content than the drop-down, but it's not working.
How can I make these divs appear in the correct order? - I've made a mockup of it on a jsfiddle.
I updated your jsfiddle: http://jsfiddle.net/mvRYR/1/
You need to set position: relative; or position: absolute; when using z-index.
just add
z-index: 10; position: relative;
to your #drop style
if you add background-color: yellow; as well, you could see it better...
Related
So I have the situation that is shown in this screenshot:
There is a calendar that open when a button is clicked, the div container for the calendar is absolutely positioned. But the scrollbar of the underneath table is always on top of that calendar, the calendar has a very high z-index already.
The table has overflow set to auto.
I tried targeting the scrollbar with some custom CSS to manipulate the z-index but that made the whole scrollbar disappear:
::-webkit-scrollbar {
z-index: -1;
}
Also tried ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb which had no effect. Any idea what I can try? Thanks.
P.S. I'm using VueJs with Tailwind.
Increase the z-index of calendar like 999
.your_calendar_class{
z-index: 999;
}
have you tried positioning the parent container of the calendar div?
add your css "position" tag.
.your_calendar_class{
z-index: 999;
}
this doesn't work.
use:
.your_calendar_class{
z-index: 999;
position:relative;
}
Hoping someone can help.
My page is here:
http://www.simplypsychics.com/psychicprofile.php?pin=4439
Basically what I want to do is position an image in specific dimensions where RED is (in my picture below).
However, I tried to place it where the 'Psychic Name' is as an with align="right" but it moves by tab content down.
Does anyone know how I can put it in, maybe as a DIV, so it's always above everything and in that very place as in my picture here:
http://i60.tinypic.com/2hmmvrl.jpg
I don't know what code I need to look at. :(
I assume you're talking about the "profileimg" that's currently overlapping the text.
Just use this css:
.profileimg {
height: 118px;
float: right;
}
No need to use absolute positioning, floating the image to the right gives you the effect you need.
Add this to the css of your "content" div (the div that contains the topic, the red picture, the form and so on ... but not the "other psychics content)
position: relative;
And add this to the div that contains your picture
position: absolute;
top: 0;
right: 0;
If the position is not exactly what you wanted, you can change the position by change the values from top and right. If you do this, don't forget to add unit "px" (e.g. top: 10px;).
Hope that helps.
You can make the following CSS properties on .profileimg
.profileimg {
height: 118px;
position: absolute;
margin-left: 18%;
}
I'm not saying that it's a great soloution but if you don't really know CSS then it's probably a quick fix until someone proper can look at it.
Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.
Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}
Hi I am not sure if this is the right way to do it but I am trying to position a div tag back
over the previous div element
This is what I have working
my css that I have used to get this to work looks like
.page-frame {
background-color: #fff;
padding-top: 40px;
position: relative;
top: -35px;
}
so for the top part the div element looks the way I want it to however the bottom on the element hasn't adjusted for the -35px;
I have tried adding a clear div after the element however that doesnt help. What do I need to change to remove the space between my .page-frame div and the next div?
The use of position: relative only shifts the appearance of the element in the page, but not the actual "space" it takes up on the page. So what you have done made your visual change to show the element 35px higher, but it does not cause other elements to reflow around it. Probably, what you need to add is a margin-bottom: -35px to get the final effect you want.
EDIT: Added better fiddle example to show reflow with margin.
Use position: absolute; instead of relative
I have this page that i am working on and as you can see there are four images...if you look at the lower left booda...it has two links view Booda dog and view Booda cats. If you click the top one the bottom link moves to the left...i for the life of me cant figure out how to fix this. I am using position relitive. Here is some of my css
.booda a.button_below {
left: 107px;
position: relative;
top: 64px;
}
.entry .booda a.button {
position: relative;
right: 13px;
top: 31px;
}
there is other css if you view it in firebug
any help will be greatly appreciated ...thanks in advance
I'm not sure what exactly is going on, but changing the bottom button class from button_below to button and giving it clear:right fixed it for me.
Hope this gets you closer to a solution!
Don't use position: relative with top and right. Use position: relative on their container and then position: absolute on those spans.
It looks to me like it has to do with the text size changing when the link is highlighted.
When the upper span is selected the span is enlarged and the bottom span is shifted to align properly.
Try aligning the spans on the right instead of the left.
EDIT: To align a span to the right you can add this to your current span tags.
position: absolute;
right: 0;
But you have to switch to an absolute position. To continue using relative positioning you can wrap the spans in a single container that has position: relative