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.
Related
i'm trying to fix the position of a div while this div's alignment is centered, but when i enter position (whether fixed or absolute) alignment to center is disturbed. what's the cause?
#stage {text-align: center; position:fixed;}
You need to define a width for the fixed-position element. By default it is only as wide as its contents and aligned to the left top.
The way you describe it, probably width: 100% would be the adequate value, which stretches the element across the whole width, in which case the text-centering you applied will be effective.
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
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
I have tried a dozen different solutions and nothing seems to work.
http://betelec.ergonomiq.net/societe/offres-d-emploi
On the page above, I want the teal background of the left sidenav to extend to the height of the white container around it.
The white container gets its height defined by the height of the largest child div (in this case, the mainbody).
I have tried setting the sidenav's div height to auto, but the div remains fixed height. If I set the div to a very large number like 10000px and have overflow hidden, nothing gets hidden.
I am completely at a loss.
Set parent element to position: relative; and then the child element to position: absolute; height: 100%;
Live example.
http://jsfiddle.net/pQdAr/
It looks like your left sidebar is positioned by float:left.
The following post may help you. How to match height of floating sibling divs
I have a div that is absolute positioned (because it holds sub-divs that are themselves absolutely positioned), that I want horizontally centered.
I can achieve that using the following CSS
width : 512px;
position : absolute;
left : 50%;
margin-left :-256px; // half width of div
(complete test in http://jsbin.com/eruwep/2/edit)
However when the window isn't large enough, the div overflows to the left.
Is there a way to have it centered when the page is large enough, but left-justified otherwise (using just CSS)?
Why are you using position: absolute for the container? If it's just because you want its absolutely positioned children to be positioned relative to their container, you don't need absolute for that. Any value other than static will do that.
Changing the CSS you mentioned in your question to the following will make it work:
width : 512px;
position : relative;
margin : auto;
Example in: http://jsbin.com/eruwep/3/edit
You could try media queries: http://jsfiddle.net/RfUZj/