The community is working on translating this tutorial into Chinese, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".
If you are fluent in Chinese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Chinese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
Introduction to positioning
As mentioned several times in this tutorial already, the positioning of elements on a webpage is very fluid. Unlike printing, you don't have a fixed size that you can adjust everything to, because websites are visited from screens in all sizes, from small cell phones to huge desktop monitors, all running in different resolutions. For that reason, elements in a webpage are automatically laid out right after each other, in the order in which they are specified. This positioning model is called static and all elements use it by default.
Positioning is controlled mainly by using the position property, which can have the following values:
Static is the default way of positioning elements, so you only have to set the position property to static to override a previously set position. In the static mode, your elements are placed from top to bottom, within the available space of their parent, while respecting any margins set on the element itself or the surrounding elements.
As the name indicates, relative elements can be moved around within their parent element. By default, if you set the position property to relative, the element is placed as if it were static, but you can then use the top, bottom, left and right property to move it around by setting these values relative to the parent element.
An absolute positioned element is placed exactly where you want it to within the browser window, by adjusting the top, bottom, left and/or right properties. This means that you can place elements e.g. in the top, right corner, even if your main page has been tied to the middle of the screen. The exception to this is if you place an element with an absolute position inside of a relatively positioned element - in that case, the child element will be confined to the space of the parent element instead of the entire window. All of this will of course be demonstrated in the upcoming chapter about absolute positioning.
By using the fixed property, your element will be positioned as if it were absolute, with one very important addition: When the user scrolls, the fixed element will remain in this position all the time. This allows you to create, for instance, a top menu which remains on screen even when the user scrolls through down through your page.
Besides the position property, floating of elements also causes the position to be changed - we use the float property for that, which will also be described in this part of the tutorial.
So, as you can see, CSS supports several different positioning techniques, all of them which will be discussed in more details in the upcoming chapters. Especially absolute positioning, where you take complete control of where an element is placed, is interesting. You should however be very aware of the fact stated above: Your website is very likely to be rendered on screens in MANY different size, so if you decide to use a different positioning approach than the default, you should do so carefully! Read on for a thorough walkthrough of all the possible positioning methods.