1 Position Tue Nov 30, 2010 11:48 pm
Unknown Data
Registered Member
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.
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.
To place the boxes side by side with relative position, should the x/y coordinates be specified as shown below.
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.
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.
|
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 11:02 pm; edited 1 time in total