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/
Related
I have Div1 with 3 children Divs Div1Child1, Div1Child2, Div1Child3, and then I create one more div Div2. Div2 is overflowing on Div1.
How to prevent this?
My code-
<div id="idDivContents">
<div id="idDivBanner"></div>
<div id="idDivPoster"></div>
<div id="idDivProducts"></div>
</div>
<div id="idDivFooter"></div>
Here idDivFooter is overflowing on idDivContents.
But I need idDivFooter below idDivContents.
I got the issue. Since I can't delete this question, I am answering it here-
The problem was with the height of the parent Div. If the height of the parent Div is equal to the sum of the height of the child divs then the Footer div won't overflow.
Hello I have a slider in my webpage and I want to place a small box on the top of that slider. How can i achieve this with css positioning?
<div id="slider"></div>
<div id="captionBox"></div>
html
<div class="container">
<div id="slider"></div>
<div id="captionBox"></div>
</div>
css
.container {position:relative}
#captionBox {position:absolute;top:0;left:0}
You can change top and left to px values also e.g 10px. You can also then apply z-index css rules for layering effects
explanation
An absolute positioned element is positioned at an offset to the boundary of its nearest ascendant that has relative positioning. An absolute positioned element is ignored in the flow of an HTML document so you cannot float it
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/
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.
i have a sidebar having many nested divs to place my rounded corrners.but when i tried to set the content's div height equal to 90% its not expanding.what is the issue.my html,body have 100% height.my div nest is some what like this.
<body>
<div class="main"> //it contains header n content div,its height is 90%
<div class="header"></div> //its height is 10% of main div
<div class="content"> //its height is 90% of main div
<div class="vertical_navigation"> //its height is 99% of content div
<div><div><div><div> //thses divs are for rounded corner image concept
<div> </div> //this div contains the data.now its height is 80% but its not expanding?h
//i cant use min-height,its not working too.how to give height referenced to //vertical navi div??
</div></div></div></div>
</div>
</div>
</div>
<footer></footer>
</body>
have you considered applying rounded corners with just css and not worrying about the ieretards not having them?
When having so much nested div, it's good you consider the measurement in width and height of the DIV if the container div is lesser that the ones inside it, it won't stretch,because that way, the browser can't detect how far the div is meant to stretch. to resolve this use make proper use of CSS.