When I re-size browser the elements whose position is set absolute does not changes according to other elements. if i place absolute divs inside relative then black box is not shown.
<div id="outer"></div>
<div id="blackbox"></div>
<div class="form"></div>
#outer{
width:1250px;
height:auto;
margin:auto;
position:relative;
}
#blackbox{
width:100%;
height:100%;
background:#000;
opacity:0.5;
position:absolute;
z-index:10;
left:0;
top:0;
}
.form{
width:500px;
height:350px;
z-index:20;
background:#FFF;
position:absolute;
top:100;
left:400;
}
Used to this
<div id="outer">
<div class="blackbox"></div>
<div class="form"></div>
</div>
Define to parent div position relative and child div position absolute
Live Demo
More about Position
Absolute and relative positioning is relative to a "containing block"
Absolute blocks are placed relative to their "containing block". They define a new "containing block" for their children.
Relative blocks are placed relative to their in-flow position. They also define a new "containing block" for their children.
So, when you place an absolute block X inside a relative block Y you are saying "put Y in the flow of the page, shift it around a bit and then fix X relative to Y's new position".
Looking at the code - you have set outer to have a height of auto and blackbox to have a height of 100%. So the parent's height is based on the child's height, and the child's height is based on the parent's height! So they collapse to 0px. That is why you are not seeing blackbox. Try #outer {height: 1250px;} to see things...
Hope that helps, if not then read the specification - that is always the ultimate answer to all these questions (it's how I learned CSS)!
http://www.w3.org/TR/CSS2/visuren.html
You have a typo in your css. Change from #blackbox to .blackbox
<div id="outer">
<div class="blackbox"></div>
<div class="form"></div>
</div>
#blackbox -> wrong
use .blackbox { }
Also remember that absolute positioned elements must always be inside relative positioned element
Related
My html is as follows:
<html>
<head></head>
<body>
<div id="board">
<div class="person"></div>
</div>
</body>
</html>
Now here is my css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#board{
position:relative;
height:500px;
width:500px;
background:yellow;
top:5rem;
left:8rem;
}
.person{
position:absolute;
top:34rem;
left:20px;
padding:1rem;
background-color:blue;
}
Now my question is why does the div with .person not positioned absolute to the div with #board? I feel like it should work since the parent element is positioned relative and then the child should position itself absolute to that parent element because of that. When I give .person div a crazy top, it still manages to break out of the parent div. Why is that? Thanks for any feedback.
I checked your code and it seems to be working fine, it's just on the .person you have top:34rem;
If you set .person top:0rem; and change the #board's top:#rem to any other rem value, you will see the .person moving with the #board
Also, using absolute position removes that element from the document workflow, so you can place it anywhere you like on the page. Negative values work as well. The only thing is, it looks for the first non-static element (the default position for elements) as a place to start, so you can use that one as a marker instead of the window itself. If you didn't put relative on the #person and had no other non-static elements surrounding it, it would go to the outermost element and basically use the webpage as the marker for its initial positioning. Since you used relative it starts its absolute positioning there because it is the first non-static element. You can still move it anywhere, it just starts there though.
I created a div tag at the beginning of my document in html with specified width and height. Now after closing the div tag, whenever I create other tags like the p tag they are always inside the div tag I created instead of at the bottom of the page.
Do I have to position every element?
How many times do I have to use the relative and absolute positioning in a document?
An absolute positioned element is out of the normal flow of document so it not takes room. You should set dimensions for its relative parent manually to simulate a normal flow. You may use a fixed height in pixels or use aspect ratio Technics for percent dimensions.
A sample of relative div with no size:
#test{
position:relative;
}
#abs{
position:absolute;
}
<div id="test">
<div id="abs">
This div will expand the relative parent with 0 pixels in height
</div>
</div>
This text has overlap with previous element.
A sample of relative div with fixed size:
#test{
position:relative;
height:60px;
background:#ff0000;
}
#abs{
position:absolute;
}
<div id="test">
<div id="abs">
This div is absolute but the parent has its own size
</div>
</div>
This text has no overlap with previous element.
A sample of relative div with aspect ratio:
#test{
position:relative;
padding-top:30%;
background:#ff0000;
}
#abs{
position:absolute;
top:0;left:0;right:0;bottom:0;
}
<div id="test">
<div id="abs">
This div is absolute but the parent has its own aspect ratio 1:0.3
</div>
</div>
This text comes after the previous element.
Finally I have to say that if you are a graphic designer and want to design a web page, you are not ought to design entire the page using relative and absolute elements. You have too many options to design a template using blocks, inline-blocks, tables , flex boxes etc. which regard the normal flow of document.
I am trying to stack two divs A and B.
Div A - will be scrollable but its height needs to be determined by the div underneath it, Div B so if the content in Div B changes, and it's height changes the height of Div A also changes.
Div B - needs to be aligned to the bottom of page on top of a absolute positioned footer. Its content needs to be aligned to the bottom.
I've tried using position relative and float by wrapping these divs in a wrapper, but the whole thing breaks when I try to keep the Div B aligned or positioned absolutely above the footer.
I've got a feeling this needs to go back to basics, any help would be greatly appreciated
thanks
Here's a basic example. I think I have correctly understood your requirement. This example has them appear to be stacked but in the HTML they are not actually stacked, they are nested. I wasn't sure if you could allow that in your solution but fingers crossed.
Example: http://jsfiddle.net/jyR2A/1/
CSS:
#divA {overflow-y:scroll;position:absolute;height:100%;top:-100%;background:green;width:100%;}
#divB {position:absolute;bottom:0;background:blue;width:100%;color:white;}
HTML:
<div id="divB">
<!-- Div A is nested so we can use divB's height -->
<div id="divA">
</div>
<!-- Div B content -->
<div id="divBinnerContent">
Line 1 <br />
Line 2 <br />
..Keep adding more lines to test how it works <br />
</div>
</div>
How it works:
divB is the parent element defining the height of divA. So if we set divB position relative or absolute and place divA inside then we can set divA's height to 100% to give it the height of parent element divB.
Now to position divA we make sure it has position:absolute and set top:-100% which will move it up the same distance as the height of its container divB. Position absolute not only allows us to position it correctly but it also removes it from affecting the height of its parent, divB.
And the content for divB I have made a nice container for it but it is not neccessary. Simply put it anywhere inside divB (but not inside divA) and it will be OK.
You can use the content to define the height,as I have, or use an absolute height set in CSS.
Hope this is what you were after.
Le-roy
I managed to achieve this with help from this question and fiddle.
Stack div elements in css vertically (with dynamic height)
http://jsfiddle.net/nCrEc/334/
Essentially the answer was giving my Div A a height without using the height parameter but instead using absolute positioning on top and bottom. Which meant changes to Div B changed the location of the Div A's bottom (oo er) which pushed the middle div up whenever another populates the bottom area.
<div class="con">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
then using this CSS
.con {
width:200px;
top:50px;
bottom:0;
left:0;
position:absolute;
background:#ff0;
}
.top {
width:200px;
height:20px;
position:absolute;
top:0;
left:0;
background:#f60;
}
.bottom {
width:200px;
height:50px;
position:absolute;
bottom:0;
left:0;
background:#f60;
}
.middle {
overflow-y:auto;
min-height:1px;
position:absolute;
bottom:50px;
top:20px;
left:0;
background:#06f;
}
This is how i designed the layout for my header
<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>
Initially i had set the top property for the DivBottom as 35px.At that time i did not have DivTop. So now, after adding it, the top for the DivBottom has been calculated from the new child(DivTop) as DivTop's height + DivBottom's top. As a result the layout got collapsed like this. I need to place DivTop without affecting the DivBottom's Top, Any ideas.?
[Note : I did not use absolute positioning for my divs, Because in that case margin:0 auto wont work.]
You're using relative positioning, for which this is the expected behavior. See the W3 on relative positioning:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.
So if you insert something above a relatively positioned element, it will first position according to the "normal flow", and then be repositioned according to your CSS.
You'll need to change the position to another value if you want the behavior you specified.
You would need to use absolute positioning:
#first
{
position:absolute;
left:50%;
margin-left:-5px; /* half the width value */
width:10px;
height:10px;
background-color:yellow;
}
http://jsfiddle.net/3u3gz/1/
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.