I almost have the same problem as this one:
But i can not use his solution. I must set every thing visable. suppose i have this code:
<body>
some information
<div style="position:fixed;width:100%;height:100%;background-color:green;z-index: 2;opacity: 0.7"></div>
<div style='z-index:1;background-color:white;position:fixed'>
test1
<div style='z-index:3;background-color:red'>
test2
</div>
</div>
</body>
My opinion is the mask div is over the body, and the parent div. the parent div is over the body. In the parent div there is a child div which is over mask and his parent and ofcourse the body. Mask, parent and child are all position:fixed, the body is relative. Well , i just can not set them whatever i change theire position type or z-index. only if i do not set the z-index of parent, then the child will correctlly over the mask, but if not, they all behind the mask.
In order for z-index to take affect an element must be positioned. Also lower the z-index of your mask and increase the z-index of test1. I would also recommend not inlining the styles, however I suspect this may be for the example.
<div style="position:fixed;width:100%;height:100%;background-color:green;z-index: 1;opacity: 0.7"></div>
<div style='z-index:2;background-color:white;position:fixed'>
test1
<div style='z-index:3;background-color:red; position:relative;'>
test2
</div>
</div>
Working Example: http://jsfiddle.net/vQz6P/
Related
The layout is quite simple.
<div id="div1">
<div id="div1-child">
</div>
</div>
<div id="div2">
<div id="div2-child">
</div>
</div>
Both childs float right and 100% height of their parents. But the first child is a bit lower, so the second div is pushed left to get the free room for the first. I need div2-child to overlap div1-child. But if I set different z-index to div1 and div2, div1-child just being overlapped by div2 still affecting on div2-child.
I need this to be explained.
Here is the fiddle.
If you give position relative to parent than you have to play second child dive with position absolute.
if you are agree with position absolute with second div child than your working demo is below
jsfiddle.net/2Js5B/2/
If I have the following structure, for example, in a single page layout:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Is it possible to set the minimum height of divs 1-4 to 100%, and position each div one under the other, using CSS alone? Ive created a page where the each div is 100% in height but problems begin to arise when the content of the divs are longer than the browser window. There seem to be a lot of min-height 100% related articles but I haven't found one yet where there is more than one div involved.
For height or min-height to work correctly on a element, the parent of a element needs to have a explicit height declared. This goes all the way up in your DOM tree.
There shouldn't be a difference for rendering one or multiple div elements with min-height as far as I know, so yes it is possible to do the positioning with CSS alone.
See Percentage Height HTML 5/CSS for more details
I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:
<div id='container'>
<div>Blah</div>
<input type='text'/>
<input type='submit'/>
<div id='background'>
<img.../>
Some Text Maybe?
</div>
</div>
My failed CSS:
#background{
float:left;
z-index:-999;
background-color:black;
height:'+o.height+'px;
width:'+o.width+'px;
}
The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.
Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.
What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.
Try putting the background as the container's first child, then using position: absolute;. Mess around with the z-index until it works.
Also, you may need to specify a "more negative" z-index on the <body>, otherwise your background element will end up behind the body (and thus invisible).
I have position:fixed <div> that appears in the middle of the screen. When there are messages, a second position:fixed <div> is put next to the first <div>.
I'm finding on different screen sizes (say a netbook - small screen) the <div>'s sit on top of each other.
Is there a way to lock their position to each other? I tried using a fixed container to hold both of them, but they still moved.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
EDIT:
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS - container1 and container2 still move when I change the screen size.
#wrapper {
position: fixed
}
#container1 {
position: fixed
}
#container2 {
position: fixed
}
do I need to use relative positioning on the container 1/2 divs?
Most importantly, id is unique. You cannot use id="container" on three different elements. Each must have their own id.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
Should be something like this...
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
Also, where is your CSS code?
If you don't want these things to push each other around as the window size changes, one method would be to specify the exact size and position of each container.
EDIT:
Again, without seeing an example of this page, a demo, or a better description of what you want, this is speculation.
You could put fixed position on the wrapper and then put an exact size and position on the <div>'s within.
The position: fixed CSS rule "fixes" the element's position on the screen. Once you set it to fixed, it will never move from the position you put it in. Since you're applying fixed to all of your elements, you're seeing the elements stack (likely in the top-left of your screen considering you're not providing a top or left value).
If you want the child elements to appear inside your fixed container, just don't add position: fixed to them and they'll sit inside the parent just fine.
Of course, all of this is pure speculation considering we can't see an example of your problem, nor your desired result.
you cant fix the position of your div like this. first of all you have to find the screen size for your parent div which contains that div u want in middle.like
<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
var winW, winH;
winW = document.getElementById('parent').availWidth;
winh = document.getElementById('parent').availHeight;
}
this is how you vil get the size availabel for parent div.Then set the width and height of parent div according to it.now if you have width of parent div its easy to set middle_div in middle of parent div.
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)