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.
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.
Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute;
Would there by anything wrong, or should I say, would anything break if I was to write:
* {
position: relative;
}
or perhaps the below example, as these are usually the only elements I require the relative positioning on:
div, navbar, footer, section, aside, header, article {
position: relative;
}
According to W3schools, all elements are position: static; by default which is positioned according to the normal flow of the page.
"HTML elements are positioned static by default. A static positioned
element is always positioned according to the normal flow of the
page."
and according to the same source, relatively positioned elements also position according to the normal flow of the page unless overridden with CSS:
"The content of relatively positioned elements can be moved and overlap
other elements, but the reserved space for the element is still
preserved in the normal flow."
Yes, it is. If you try to position one element absolute it is positioned relatively to the closest ancestor, which has a CSS position other than static.
If every element has position:relative, this would be the direct parent.
But you might want to position the absolute element relatively to an element further up in the DOM tree or maybe absolutely on the page body.
At some point you will have the situation where you are not in full control of the HTML. Then you will see, that it is counterproductive to set everything relative.
An example might be a phat layer menu. You have the layer inside a .menu class somewhere deep in the jungle of hierarchical ul li elements. This should be positioned relative to the .menu element's position. You might not want to change the DOM tree here.
If you apply position: relative to all elements in the page, you won't be able to use position: absolute efficiently, because you can't position an element to the grandparent and you will probably break in a unpredictable way external plugins/modules that rely on position: absolute.
You may encounter problems with z-index (for example in dropdowns menu), and you'll end up overwriting this behaviour with position: static and position: absolute.
As for me using position:relative is not good - because sometimes you need to position elemet relatively browser window and it will give a problem to you. But if you are sure that you wont doing this Go ahead
The first thing that jumps to mind and one that we saw in one of our sites recently was that any absolutely positioned elements within those relatively positioned elements will have their position offset from that element.
As an example that would be a problem if you were trying to position to the centre of the body.
Setting position:relative to all elements is a bad idea. This can affect solutions built around z-index. As per html design positioned elements will display on top of unpositioned elements. If you set position for all elements some time unexpected elements participate in z-index calculation.
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.
I have a wrapper surrounding a header with content inside as well as a container with content inside. The wrapper is really on there to keep everything positioned to each other accordingly within the confines I set, as well as to center everything. I have my container to automatically re-size according to the content that goes inside of it, this works without issue. However, the wrapper around the header and the container won't follow the same rule and ends up taking a height of 1px it seems. Please note: the code below will show the wrapper outlined by a dashed white border up at the top, it should instead wrap around everything it contains.
Here's the code to the website on jsFiddle.
Any help would be greatly appreciated. I feel as though I closed all of my floats, I don't see why the height: auto; on wrapper won't work, but maybe there's something I'm missing.
height: auto on #wrapper isn't working because virtually every element inside it has position: absolute.
What does position: absolute do? http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is
removed from the normal flow entirely
(it has no impact on later
siblings). An absolutely positioned
box establishes a new containing block
for normal flow children and
absolutely (but not fixed) positioned
descendants. However, the contents
of an absolutely positioned element do
not flow around any other boxes.
The choices to fix your problem:
Give #wrapper an explicit height - but that won't work if you don't know the height beforehand.
As #jeroen said: use JavaScript to set the height of #wrapper.
What you should really do is completely redo your CSS:
position: absolute is not how you should position every element on the page. You should use floats instead.
For a comparison of using position: absolute vs floats, see:
http://www.htmldog.com/guides/cssadvanced/layout/
You are using absolute positioning for the contents of the wrapper, #container and that takes it completely out of the document flow. The same applies to the contents of your header.
The only way to get your wrapper to wrap, is using javascript to calculate and set the height manually.
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.