Home1
Position on Tue Nov 30, 2010 10:18 pm
Unknown Data
Registered Member
Posts : 812
Points: 245
Age : 16
Location : Denmark
Browser:
Position Learn CSS - part 14 |
The Positions The "position" attribute describes how you can positionate your element. The method you use can either be "relative" or "absolute" for best experiences. Absolute position is calculated from the upper left corner of the element it is in. Relative position is calculated from the element's current position. Element can be displaced by position relative to this position. The CSS2 positioning context is calculated from the rectangular box principle. W3C uses the term "containing block", in other words, it has been through absolute position that could place an element in the document. The absolute positioning is based on the top left corner of the document (component) and by the absolute positioning model, an item will be placed (offset) relative to the element which it finds itself in. The following values are possible for use in connection with position: top, bottom, left and right. Absolute position In the example have I placed an element (2) inside another (1). We are using Inline style to make it more simple.
The body element contains the elements div ID 1 and 2, and thus can be said to be "containing block" for these two elements. Div id 1 is a further "containing block" for the element div id 2. Relative position I have chosen to illustrate, with some source, the relative positioning with the following small example. We have desiced to place two boxes side by side with spacing of 5px from the boxes. Agian are we using an Inline style to make it more uncluttered.
Using relative position, am I wishing to place the boxes side by side. The code is shown below.
What's now happening? Well, box number 2 dosen't got moved to top 0px and left 105px. The box isn't moved by the y-axis but in the x-axis. So it was moved relative to its original position. To place the boxes side by side with relative position, should the x/y coordinates be specified as shown below.
Fixed position The fixed value works as it sounds. It will fix (cliam) your content, were you wan't it to be displayed. Ie. will it be on the same place all the time, also with scrolling. If we take a look at a example.
As you surely had noticed will the box stay were it should be placed. Z-index By using the z-index can we put different element on eachother. To this can you use positive and negative numbers. When you use integers, can you manage the placement itself. It is also possible to use 'auto', this will subsequently be defined if the elements are superimposed elements which were defined earlier. Zero (0) is the starting point. Items defined with a high number will be placed on top of elements with a lower number. Float The float defines were the element should float. Here can we use right, left and none. By using the float, is it possible to place two equal element tags in a single line, one that floats to the right and one that flows to the left. An example is shown below.
Saved as float.css
That was all about these elements and CSS. In the next lesson (that's also the last one) are we going to validate and optimize our stuff. |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Unknown Data on Thu Dec 09, 2010 9:32 pm; edited 1 time in total
Thanks Unknown