w3c Says that z-index "Only works on positioned elements(position: absolute;, position: relative; or position: fixed;)."
I see it works in absolute position: http://jsfiddle.net/WwXVV/2/
But why not in relative position: http://jsfiddle.net/WwXVV/
Can anyone explain why in relative position and in this specific case the div with the higher z-index is not on top?
CSS:
#top {
position:relative;
float:left;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:relative;
float:left;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
HTML:
<div id="top"></div>
<div id="bottom"></div>
You are simply floating them next to one another. Apply left to the bottom div:
#bottom { left: -100px; }
What this will do is "position" the bottom div under the top one. Applying relative position by itself won't do anything, you need to start moving the target element around to see the stacking effect.
If you are wondering about absolute positioning, it works differently. Absolute positioning takes the element out of document flow (meaning it won't affect the layout of other elements), and by default puts it at the top left of its first ancestor that doesn't have a value of position:static, so both your elements stacked on top of each other.
You have floated both elements to the left. They don't overlap, hence z-index doesn't do anything.
If you add margin-left: -20px to the right box, you'll see the desired effect.
Simple, with position:relative and float:left; the divs will be next to each other. With position: absolute they will ignore float:left; and will put both element on the same spot, using z-index to show who is in front.
z-index is just relevant when the boxes overlap visually.
In case of Relative Positioning, z-index working fine. Try this code
#top {
position:relative;
top:20px;
left:0px;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:relative;
top:0px;
left:30px;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
In case of Absolute Positioning
#top {
position:absolute;
top:0px;
left:20px;
top:0; left:0;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:absolute;
top:20px; left:50px;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
Related
How can I get a child div which is positioned absolutely to not show up when its placed outside the reach of its parent?
https://jsfiddle.net/knp9ebys/9/
.papa {
background:red;
overflow:auto;
width:90px;
height:90px;
}
.baby {
position:absolute;
top:100px;
left:100px;
width:25px;
height:25px;
background:blue;
color:white;
}
Try this:
.papa {
background:red;
overflow:auto;
width:90px;
height:90px;
position:relative; /* add this line */
overflow:hidden; /* add this line */
}
.baby {
position:absolute;
top:100px;
left:100px;
width:25px;
height:25px;
background:blue;
color:white;
}
If you add position:relative; to the parent element then the child element can be positioned within the context of the parent. Adding overflow:hidden; is the trick because this will remove scroll bars... and since the positioning of the child element is outside the parent's bounds, it will make the child appear to be hidden from view.
I have a #left, absolute positioned div and 2 other divs on the right side. When I add margin to the #top div on the right side it affects the #left div too. I know there's a margin collapse stuff but is it affects the position:absolute too?
The code is really simple, nothing special, but I can't find the solution.
* {
padding:0;
margin:0;
}
#wrapper {
width:400px;
height:400px;
background:gray;
position:relative;
margin-left:100px;
}
#left {
background:pink;
width:100px;
height:100%;
left:-100px;
top:0;
position:absolute;
}
#right {
background:red;
}
#top {
background:green;
height:26px;
}
<div id="wrapper">
<div id="left">Left</div>
<div id="top">top</div>
<div id="right">Right</div>
</div>
Jsfiddle: http://jsfiddle.net/9thvLfe0/2/
Just add this to #top :
float:right;
width:100%;
JSFiddle
Just give the margin to top and give negative margin same to left.
Well, the problem is that your #wrapper is relative and the #left is absolute.
By inheritance, #top and #right are also relative. So, adding a negative margin to top in these conditions, it's adding it to #wrapper.
You could change #wrapper to position "fixed" but you would have to manually set the margin/padding to #hide-top because as it is, he will be hidden under #wrapper. Unless you set it like that :
#hide-top {
position: relative;
top: 400px;
}
Yet, my solution wasn't to change your CSS but your JQuery. You could just hide #top with the hide() function. See my JSFiddle for example ;).
I would like to align an absolute positioned div. Top:50%, bottom:50% not working, what's the solution for this?
CSS
#container {
position:relative;
background:red;
width:600px;
height:600px;
}
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
bottom:50%;
}
HTML
<div id="container">
<div id="cen"></div>
</div>
http://jsfiddle.net/2xq5F/
To center something vertically, you need do add a top: 50% and a negative margin-top: -(elementHeight/2).
In your case it will be
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
margin-top: -150px;
}
You can also do it this way:
#cen {
position:absolute;
width:150px;
height:150px;
background:grey;
top:0;
bottom:0;
left: 0;
right: 0;
margin: auto;
}
Demo at: http://jsfiddle.net/audetwebdesign/EBmy3/
Big advantage, no math required.
However, this works because you specified width and height. This gets trickier when you use percentages.
Note: I made the blocks half the size so they fit in the fiddle window... will also work with the larger blocks.
Works Well With Replaced Elements
This technique does a pretty good job if you are positioning an image, which has specific dimensions (though you may not know them).
See example in fiddle.
Vertical alignment is based off of other inline elements. The best way I've found to vertically align something is to add a psuedo class.
It's easy to vertically align something if you know the dimensions, like some of the other answers have noted. It makes it harder though, when you don't have specific dimensions and needs to be more free.
Basically, the method aligns the psuedo class with the rest of the content to align middle whatever is inside the container.
div#container {
width: 600px;
height: 600px;
text-align:center;
}
div#container:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
div#cen {
display:inline-block;
vertical-align:middle;
}
I'm not sure what you need it to be absolutely positioned for, but if you trick CSS into thinking your container is a table-cell, you can use the vertical-align property for a fully dynamic layout.
#container {
position:relative;
background:red;
width:100px;
height:200px;
display: table-cell;
vertical-align: middle;
}
#cen {
width:100px;
height:20px;
background:grey;
}
If those are the real measurements, why not just do this?
#cen {
position: absolute;
width: 300px;
height: 300px;
top: 150px;
background:grey;
}
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
I have two div like:
<div class="outer">
<div class="inner"></div>
</div>
then I give them style like:
.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
.inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}
I want the "inner" in "outer" ,as well the left and right have both 11px space,but it can't be achieve,only the left have the 11px gap,the "inner" seems always have the same length as the father's length
Then I think maybe setting the outer padding with 11px will be work.However ,it still doesn't work……
Why this happened?So how can I solve this problem?Is that possible with the effect?
Here is the only case
The margins will add up to the width which is already stretched to the outer DIV by (width 100%) what you can do is the following - link:
.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}
Removing position: absolute; (or changing it to relative) and width: 100%; from .inner will give you exactly what you want. Then, if you really need an element with position: absolute; inside, put it in .inner.
An example