Given the following css
li.menuitem{
position:relative;
top:0;
left:20px;
display:inline;
I would expect each li to be positioned 20 pixels further left than it would be without position relative.
However, what happens is that as I change the value of left, all if the menu items move together in relation to the left position. In other words, the space between items does not change.
While there are other ways to achieve what I want, I am curious as to why both items move and the distance between then does not change.
Thanks,
-dmd-
Because that is what margin-left is for.
Here's an illustration: if you and I are walking side-by-side and we both take 20 steps forward, you and I would still be side-by-side.
Similarly, position: relative doesn't take into account the new positioning of other position: relative elements around it. They all move relative to where they naturally are, and not relative to where other elements now are.
The MDN entry for position: relative states:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
Related
.classname {
position: relative;
}
position relative in css without top right left and bottom mention,
I read that this not change any position, but in some web page write position: relative; without top right left bottom mention and if I delete "position: relative;" then position will change.
Can I know what exact use of "position: relative; " without top right left and bottom mention.
This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
The most known use for setting position relative on a parent element is to position child elements, set to position absolute, relative to the parents position.
Presuming I have a div container with position: absolute, that has 20 div children, all with position: relative (same size, colored 100px X 100px boxes). The question is how to display all child-divs overlapping each other (each on top of the other, like a deck of cards)?
There are a few questions regarding this but I need to understand the principle that can apply to any number of divs (am not totally clear on negative margins), ideally something where I do not need to recalculate the positioning for each child-div if any/all sizes change.
As the other two comments have said, i would position: relative; your parent div. Then position: absolute; all your cards. Position absolute takes the element out of the "normal flow" of the website to then allow you to position the cards over each other. You could overlap them with position: relative; however it would mean that each card would need its own individual styling to make sure its positioned over the other which would be a lot of work. see here for more info on position attribute http://www.w3schools.com/css/css_positioning.asp
I am unsure how to position elements using css, as when I use methods like the following, whenever I resize the browser, the elements stay in the same place instead of where I would like them to be on the resized document. Please can you tell me what I am doing wrong?!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
Please, have a fiddle - http://jsfiddle.net/hHGRc/
Within the (X)HTML DOM, CSS recognizes four types of positioning. By default, every element in HTML is positioned Statically. This means that it is positioned according to the place that it appears in the normal flow.
Relative Positioning
When an object is positioned relative, it means that it modifies the position based on the origin, which is where it would have been positioned in the normal flow (static). Relative also does something else special, however, and tells the browser that all of its children will be positioned according to this element, whether using relative or absolute.
Absolute Positioning
When an object is positioned absolute, it is placed according to the position of its nearest non-static positioned ancestor. If there is not one, then it uses the <body> to determine its position. This has the potential to break document flow, if its siblings or ancestors are not positioned absolute. If all are positioned absolute from the outer most top node to current node, then it will maintain the flow.
Fixed Positioning
This takes the element out of the flow and positions the object according to the Window object. This means that no matter the scroll state of the document, its size or any other property, it will always appear in that location. (This is how you get objects that scroll with you).
Multiple solutions to your issue
First, as described by others, you may add position:relative to the #header. It will, like explained above, make your header the nearest non-static ancestor and will use it and the basis for determining position. This is probably not ideal for you because you are an admitted novice and this one absolute could easily break enough flow that you may struggle with sibling elements.
As an alternative, you may change the logo from position:absolute to position:relative. This will keep your logo in the flow, but move the logo according to where it appears naturally in your document flow. Chances are that unless you are using floats in your #header, this is probably the one you want, as it a) keeps flow, b) allows for use of child element floats without losing flow, c) achieves your ideal positioning, d) keeps inheritance from parent elements (when it is important).
Another choice is to change the #header to position:absolute. This may alter the way everything interacts, however, unless you change all of your parent and sibling elements to position:absolute. Additionally, you may lose access to ancestor defined widths and heights, as they are only inherited if they are in the same flow. This is the 2nd best situation for you as you can simply add the rule body * { position:absolute; } and all will remain in the flow with you. However, it neglects to really teach you the things you need to learn about positioning and will simply be a crutch.
Hope this helps,
FuzzicalLogic
Defining position: absolute in CSS takes the element in question out of the flow of the document.
Think of this as layers: the bottom most layer is the document (though not always, depending on z-index!), and the top most layer is your element which you have defined as absolutely positioned.
By setting position: absolute, you have told the browser that you will be responsible for positioning the element relative to the top left corner of the document (screen). Above, you have told the browser to position #logo 20px from the left and 20px from the top of the document. When you resize your browser viewport, that element will remain in that position.
I think what you want is to position your element within the document flow, without using absolute positioning. This can be achieved with a combination of floats, margins, and padding.
CSS positioning can be tricky to understand correctly, but once you do, you'll find it very useful.
Try this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Basically, to position anything that needs to be locked to a parent or a container element, the parent or container element itself needs to be positioned as well (absolute, or relative, doesn't matter) this is called positioning context. If an absolutely positioned element cannot find a parent or container that is positioning itself, it will then use the `body as the positioning context.
So in your example, if i were to to guess without seeing your HTML and more of your CSS,
adding position:relative to #header would then allow .logo to position itself absolutely from the top left of the #header element.
Also important to remember that absolute positioning takes the element out of the normal flow of the document.
I'm going with a wild guess and saying that your logo is inside the header division, but your header is positioned staticly. Therefore, your logo is not being positioned according to the header, but according to the document's window. So it will be going to a position that is 20px right and 20px down from the top left corner of the document in all instances.
Try setting position: relative on your #header element. This will keep the header in the same place as it would always appear, and the logo will use the header box to find it's left and top positions rather than the browser window.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
What is the best way to position and align images on an HTML web page?
I will have approximately 10 user-controls that each have a set of images on them laid out in a specific pattern, eg - an arc, a circle, straight line, some other sort of curve.
All the images will be the same size.
How can I achieve this using best practices?
Absolute positioning is probably the way to go for something like that. With absolute positioning, you basically just define the x/y coordinates of each one. To position an element absolutely, you set position: absolute; in the CSS, and then top: 5px; and left: 5px; (that is, 5 pixels from the top, 5 from the left; you can also use bottom and right instead). Note that though it's called "absolute" positioning, which would make you think it's relative to the whole document, it's actually only relative to the first ancestor element with positioning other than static (static is the normal positioning mode). So if you wanted to contain a bunch in a parent and position it normally, you would set it to position: relative;, or you could position it absolutely as well. If no parent has non-static positioning, it will be relative to the whole page. Another thing to note, is that absolutely positioned elements don't take up any space, so for instance, if you've got a big element absolutely positioned, and the window is too small, there won't be scroll bars.