At this link, you can see the bottom of the logo is blocked by the background image in the next DIV going down the page. I thought z-index was supposed to control this, but I am stumped.
http://dansdemos.info/prototypes/htmlSamples/responsive/step15_LogoProb.html
Is there a good way to put the logo where it goes on this page?
Any assistance will be extremely much appreciated.
Thank you.
Check this out: Z-index not working as expected working with picture and background-div
It may be that you need to set the logo to position: relative in order for z-index to work.
if you set the logo:
position: absolute
or
position: relative
that will work, its weird but that works. now the thing is that with position absolute you have to set the left or rights..
Related
The image has the code and the output. I am an amateur and I am only learning so I hope you can help me!
I'm assuming that you are referring to position: fixed? Position: fixed makes an element stay relative to the viewport, even if you scroll up or down. For more information click here.
I'm making a page with HTML and CSS and the width of the page is growing as I use
position:relative;
left:100px;
When I put this code in CSS, the page is pushed to the right 100px making a huge blank area to the right of my website which looks horrible.
Here is a link to my website: Wagicalmales
If you side scroll right you'll see what I mean.
Thanks in advance,
Alex
That is the correct behaviour when using position: relative (the position is set relative to where it would have been).
I'm assuming the element you are having issues with is the h1 with the 'WagicalMales' text it. To fix your problem change left:200px to margin-left:200px.
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.
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/
I've designed this page to show a picture gallery with a description for each picture. I use a div with static position and minus left and top margins, so the description is shown on top of the bottom part of the image.
The problem is that if I open the page for the first time with Firefox, the Div displays only partially (only on top of the image part is shown). Only when I click any other album does the div displays correctly.
This is the bad display image
The description div should have been displayed until the bottom of the container div. Try clicking another thumbnail image at the test site page.
This is the test site, to open the page, click the gallery menu, the one on the left bottom with a dog picture.
Has anyone encounter the same problem? Hope someone could help me. Any advice will be welcomed gladly.
Thank you!
Ah, I think I found the answer. I just put '!important' on the height attribute. And then Firefox displays the div fully!
Thank you, I should've thought that.
Use "position: relative" with negative "top" and "left" values.
I guess I've managed to solve the problem. It seems that the div is shown partially to the end of the Image tag just before the div. so then, I wrap the image in another div setting the div's height the same height of the image. I've tried it, and it looks find in FF now.
Thank you.