Hi Guys i have applied Relative positioning to the image as the above screen cap . but what i required is to take this image to front of that gray menu bar . what should i apply for menu's CSS class to do that ?
for relative position of the image i used the following code
position: relative;
top: -Xpx;
z-index: 99;
z-index:999;
or some other really high number to force it above all other elements.
Relative position is given to an element when you want to anchor (contain) other positioned elements inside it. If you want that image to appear on top of everything else you need to position it absolute. This, of course, depends on what it is you are trying to achieve.
Without seeing the html and the full css this is my best guess: You need to set the gray bar to a position:whatever and then set the z-index on that one as well.
I think you are applying the css style before the styling of the gray bar.
So you should apply the css styles on the image after the gray bar style or code.
Related
I have created hover effect of two images. image1 changes to image2 on hover in div"img3". Both images are in div"img3" and image2 position is absolute. Now my Navbar or header (section "header") position is fixed. So whenever I hover on image1 image2 comes on top of the Navbar as shown in the image2 below.
Image1
Image2
Add this to your navbar
z-index: 100;
because of this whatever u add will not poke over navbar.
The answer of DarkForest is correct.
Just to explain a bit further - the attribute of z-index which
defines layering of site elements is applicable to both position:fixed and position:absolute. The default behavior of layering is hierarchical, which means, that the element which is further in the code will initialy overlay the first element.
That is unless you define attribute z-index to one or both of these elements.
the higher the number, the more upper layer of display.
Usually, you want to assign as high z-index as you can to the fixed navbar as you don't really want anything to display over it (unless it's an element inside of it)
To summarize:
.navbar {
/*dimensions and other styles*/
position:fixed;
z-index: 100;
}
should do the trick
I have an element (the green color in image)
it has a property
top:-5vw;
Because of this it covers the link in text (1.5% /year) and makes it unclickable.
How do I make it clickable without replacing anything?
I tried using z-index, but that does not work.
Image is of inspect element, so blue colour is region of 2nd element
You can try to use pointer-events: none; on div or use negative z-index like z-index:-1.
z-index is what you are looking for. Z-index has certain things that stop it from acting the way you want it to. common mistakes are setting the position. make sure your positions are not set to static or absolute
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
I am sorry if this is really a newbie question - or if it is very simple...
I am trying to make a very basic image tooltip based only on CSS ( no JS ).
Fiddle here :http://jsfiddle.net/ufs44/1/
My problem is how to distance the image from the link in order for it not to obscure the text.
I really would like to make it with only CSS (later I will add some transitions) But right now, the tooltip is always hiding the other links below.
Doing position:relative actually makes the whole page "jump" because it is changing from display:none to display:block and the space is missing for the element...
I would like to know how I can make the tooltip to appear ABOVE the link for example, or to the side...
You need to use position: relative; within the link itself, and then position the image tooltip absolutely.
Fiddle
how to distance the image from the link in order for it not to obscure
the text .
Elements with css position:absolute are positioned using css left , right, bottom, top
As the comment - http://jsfiddle.net/5W5bB/1 - using left
left:200px;
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/