I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).
Related
I need to have a page with a responsive layout that has the following elements (see picture):
Legend:
"folds" for the menu means that it just becomes a small button, which unfolds the menu again on click);
When the left menu folds, the content and canvas div need to slide to the left side of the page. When it unfolds, they get pushed to the right again;
The bottom menu 2 is folded by default (you can only see a button). If you click it, then the small menu opens (above the other elements);
The content div is scrollable;
The elements both in content and canvas should be selectable;
Right now I have the following code:
<div id="background">
<div id="menu></div>
<div id="content"></div>
<div id="canvas"></div>
<div>
The position of background is "relative", the menu and canvas are set as "fixed".
The problem right now is that something (background div) is covering all the other elements, so I can't select the elements inside the content div and the canvas div.
I tried setting z-index correctly (lowest for the background, highest for the canvas) – didn't work.
I don't understand what the problem is.
Can somebody help me, please? Maybe you can just tell me from scratch how I should arrange those elements in CSS, so that I get the arrangement I need?
Thank you!
It seems that you have forgotten to set the position attribute for the content div? z-index only works on elements with fixed, absolute or relative position. (the default is static position, so the z-index is not working)
No idea why the other elements are covered. Maybe posting the css as well would help.
I wanna show an absolute button on top of my first google images. Basically, this button is suppose to be in the first div container's and top of the first image. I repeat some thing to see whether it is working properly or not. However, the second absolute button does not appear, I guess it is under the first absolute button. How to fix it to show each absolute buttons in the corresponding div container's first google image(white one).
I have done this (http://jsbin.com/kenute/1/edit), but it does not show properly. Here I also use borders to see the problem caused by div tags, but still some problems i do not understand why?
Anything positioned absolutely must be contained within an element that has relative positioning
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
On my site : Dev.stevehamber.com
I am trying to get the image "New Page" (currently behind the slider) to be positioned outside it's current DIV, overlapping the top right hand corner, but so that it also moves with the Auto margin of the main content. Can't seem to figure out how, with out it being either behind something or not following the auto margin of the container.
I have also had problems with the :hover attribute. Experimenting with fixed position Divs I have noticed the image/background doesn't change on the bottom right hand corner of the fixed "F", is this something to do with positioning too? :/
I tried Googling this but couldn't explain myself in 1 sentence, so I hope this makes sense. Ha!
Thanks.
In your CSS, add z-index, like this:
img.newpage {
position: absolute;
right: 1px;
z-index: 2;
}
Give the F a high z-index to make it be on top
Put the newpage.png in a div that's on top of the slider div. Put both of those div's inside another div; assign the css auto-margin attributes to this parent div.
So something like
<div id="slider">
<div id="slidercontent"><!-- in here, put the slider -->
</div>
<div id="newpage"><!-- make newpage.png the background image of this-->
</div>
</div>
As for the hover; please explain a bit more thoroughly, it seems to work fine with me. You mean the facebook button right? (its positioned top-left in my FF btw)
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/