We reviewed this point several times in our sessions, i think its a good idea to have everythings written in one place.
We talked about position:absolute and how it can help us create the compostion from our design. It’s a CSS rule that give each object a specific location on the page, we have to specify a distance from the top of the page and from the left of the page (which means all the distance is relative to the top-left corner of the HTML page).
for example a CSS rule could be like this:
This rule will postion the object with the ID logo 120 pixels from the top and 80 pixels from the left.
Objects that are positioned in an absolute way are relative to the objects they are inside of (if the parent objects are also absolutely positioned) which means that if all the objects of the page were to be inside a DIV and that div had position:absolute rule for its ID the count of the position will start from the top-left corner of that div, this allows us to make things like center the page (to have equal amount of space on both side of the design).
An example for a CSS rule for centering a page with absolute:position:
This code will center the page by the instruction of putting the object at exactly 50% of the page and then we tell him to go back to the left half of the overall width of the object, in this case it was 800 pixels so we write -400 pixels.
If we are not using position:absolute in our design it can be achieved with the code:
We also talked about using the specification of float in CSS, it allows us to tell a group of objects that they should fill the page by order based on space available. the position of those objects are relative to each other and therefore it’s not necessary to give each one a specific position in the page.
Position:fixed will keep the object on screen in a specific location regardless of any scrolling.
Position:relative can help us move objects that are positioned by a non absolute way, for example a button that is inside a block of text and you want it to be 5 pixels lower than the line, can be positioned in this way. it will take the position from the natural order of the page but will push it 5 pixels down. the code for this rule is identical to position:absolute- you need to specify top, left or both.