Position


#div-1 {  position:relative; }
relative: use top or bottom, and left or right to move the element relative to where it would normally occur in the document. It still preserves its normal space.
absolute: from the top left corner of the window or the first parent that has specified .
When elements are positioned outside the normal flow, they can overlap other elements.  The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

http://www.w3schools.com/Css/css_positioning.asp
http://www.w3schools.com/cssref/playit.asp?filename=playcss_left&preval=10%25
Right
For absolutely positioned elements, the right property sets the right edge of an element to a unit to the left/right of the right edge of its containing element.  For relatively positioned elements, the right property sets the right edge of an element to a unit to the left/right to its normal position.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_right&preval=10%25

CSS Box Model

When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.


IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>

-----------------------------------



Positioning

Static
Fixed - relative to the browser
Relative - relative to its normal position
Absolute - relative to the first parent element that has a position other than static.

With CSS, we can show just the part of the image we need.













Comments