In class we learned that if I have two divs: a wrapper div (let's call it div A) that's defined as position: relative; and another div, div B that's inside div A with position: absolute;.
What will happen is that now the position of div B is dependent on the position of div A. Meaning that now the point 0,0 of div B is not the point 0,0 of the browser, but of div A. So, if I was to move div A say 20 pixels to the right, and div B 30 pixels to the right, div B would be 50 pixels to the right of the browser's point 0,0;
Now, my question is: what if I have 3 divs. Div A that's position: relative;, within it div B that's position: absolute, and within div B, another div (div C) with position: absolute;. Now, how will div C behave? Will its position 0,0 be that of div A or div B?
Thanks in advance.
code:
<style type = "text/css">
#a {
position: relative;
left: 20px;
}
#b {
position:absolute;
left: 20px
}
#c {
left: 20px
position:absolute;
}
</style>
<div id = "a">
<div id = "b">
<div id = "c">
test
</div>
</div>
</div>
As you can see from this JSFiddle, the position of "C" div is relative to its father "B" with
position: absolute;
I don't have much to add to both these great answers, but here's an article that helped me understand the concept. http://alistapart.com/article/css-positioning-101
EDIT:
That article covers that a div with position absolute is positioned on the inner grid of its closest ancestor(parent, grandparent, etc.) that is fixed, relative, or absolute. If there is none it is relative to the html document, but note it still behaves differently than fixed. It also covers the key differences between the three position types as well as the static position type.
static - this is the default position it creates no grids for children absolute positioned divs. You can't use the css properties top left right or bottom.
relative - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it 'relative' to where it was previously at. When using top, left, right, and bottom other elements still go around where it was previously at.
absolute - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it relative to the closest ancestor(parent, grandparent, etc.) grid. Remember the grids are created by fixed, absolute, and relative elements. When using top, left, right, and bottom the element goes out of the flow of the document. (this means other items go through it.)
fixed - creates a grid for children absolute positioned divs. You can use top, left, right and bottom but they move it relative to the browser. When using top, left, right and bottom goes out of the flow of the document. (this means other items go through it.)
Div B - any absolutely positioned element is positioned according to it's closest positioned (absolute, relative, or fixed) parent.
It's a matter of personal preference, but this article was the one that cleared things up even more for me than the AListApart one: http://learnlayout.com/position.html
Related
I want to place an element in bottom left corner of another, element. I give position:relative to the parent, and position: absolute; bottom: 0; left: 0 to the child.
The problem is that the page can be loaded in ltr or rtl. In case of RTL, the child element has to be in the bottom right corner of the parent.
Many CSS properties have bidi equivalents, such as margin-left goes to margin-inline-end. Is there a bidi equivalent of left CSS property
MDN points to inset-inline-start as logical equivalent of left
When you have multiple Divs with the same class that stack vertically on each other. How come setting the position to relative and offsetting the top to say 200px only moves the first div down by 200px. The rest of the divs (which are under the same class) dont get pushed down by 200px
.question {
margin: 120px auto;
text-align: center;
position: relative;
top: 200px;
}
The margins on all the divs in the "question" class are respected but the position offset by 200px only applies to the first div with the question class. Why?
I think there's a slight misunderstanding here. In fact, all the divs are offset by 200px, but they're offset relative to their original position, not relative to the other devs with the question class.
Think about it this way: You have a container with two question divs inside. The first one of these is positioned 200px below the top of the container. The second is positioned 200px below where it would have ordinarily been positioned, which would have been right below the first question div, not 200px below this one (otherwise it would be >400px below its original position in total).
I made an example here, for you to see what I mean. Notice the third div is still where it would have been in its original position.
https://jsfiddle.net/u0sxtgz6/1/
As for the margin - this looks different because it pushes the div away from whatever was before, so it can be relative to sibling elements and is not necessarily relative to its own starting position.
I have 3 divs:
(blue) containing div with position: relative
(red) div with overflow: hidden, floated left
(green) div with position: absolute that I want positioned relatively to the first div.
see jsfiddle.
I want the green div hidden outside the red div, so making the overflow: hidden work without positioning it, because I want the green one positioned relative to the blue one.
I found some similar questions, but none that really fit this same case.
You are on the right track, but you need to make the red div have relative positioning.
Right now, your green div is being positioned absolutely relative to the blue one, but as long as that is happening, it is bound by the overflow rules of the blue one, not the red one.
When you use absolute positioning, the positioned element is bound by the overflow of the nearest parent element with relative positioning, ultimately the window if no others exist.
.two{
background-color: red;
overflow: hidden;
float: left;
position:relative;
}
JSFiddle
I believe this is impossible using only css. You could make it look like what your talking about using javascript or jquery fairly easy, but I wasn't sure if you wanted an answer in that form.
I thought a general rule is that, whenever a div foo has position: relative, then if none of the parent and ancestor has any non-static position (so need to have one of relative, absolute, or fixed), then, the div foo now will be position relative to the overall document.
But in the following page:
http://jsfiddle.net/4RcEn/6/
<div id="box1"></div>
<div id="box2">
<div id="box3">some text inside some text</div>
</div>
<style>
#box1 { width: 300px; height: 100px; background: #ffd; margin-left: 60px }
#box2 { width: 300px; height: 100px; background: #fa0; margin-left: 60px }
#box3 { width: 100px; height: 80px; background: #af0; position:
absolute; left: 20px; }
</style>
box3 actually behave like this: the left is 20px and is relative to the document, but top is auto (by default), and is in fact relative to the container div. Only when top is set to 0, 0px, or some other value, then it is relative to the document. What rule is governing this?
P.S. with the rules in the spec, I don't see a rule that says: if the top or left is not specified, then the behavior is such and such. So this is a de facto standard that if it is not specified, then if there is no "containing block (which is defined as non-static positioned block), then it won't be relative to the "initial block"?
It is positioned relatively to the document (that's the reason why top: 0 moves it all the way to the top), but if you don't set top to any value (i.e. you leave it as auto), the box has no reason to shift anywhere from its static position (where it would normally sit if you hadn't set position: absolute).
See also this answer and sections 9.3 and 10 of the spec. Section 10, in particular, contains all the rules that govern static positioning, and is quite a comprehensive if not overly technical read.
The exact rule that says an element should remain in the static position in such a scenario is in section 10.6.4. In your scenario, you don't set top or bottom, but you do set height, so the second rule among the six that are listed applies:
2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
So an absolutely-positioned element needs to remain in its normal static vertical position if top is not given something other than auto — it's not supposed to move itself arbitrarily.
Also, the containing block of an absolutely-positioned element is always either its nearest positioned ancestor if there is one, or the initial containing block.
It is work div3 is calculating from body not from div2. Because you not specific "top" position of div than div3 get "top" from div2 and make your top point same as top point of div2. When you add atributte "top: 0px;" to dov3 then you see where is div3 and from which element affected div3 position.
From the notes on the top attribute in the CSS 2.1 specification:
This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
To me this implies that if no top is specified then the box is positioned to the top of its "natural" container (its parent). When top is specified it's then offset to the closest ancestor with relative or absolute positioning (which I assume html or body have by default).
It then goes on to say:
...which cause the top of the outer box to be positioned with respect to its containing block. The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example).
I have a link in a table cell and when the link is clicked I show a hidden div.
Currently I use position: absolute and z-index:10. It works fine, but I would like to move it a bit to the top and left. When I add top: -10px and left: -10px, the div moves to the position of the window.
How do I make it 10px off the table cell?
You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp
relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute The element is positioned relative to its first positioned (not static) ancestor element
You might also be interested in fixed.
fixed The element is positioned relative to the browser window
Here is an Example: http://pastehtml.com/view/av391nzsv.html
position: relative;
instead of
position: absolute;
Relative says to measure top and left from the parent element, absolute says to measure from the top left corner of the page.
use margin-top:-10px; margin-left:-10px;