CSS-Tricks. Learn CSS Positioning in Ten Steps: position static relative absolute float. 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10. Octuss Css Tips. Kurs CSS - czym są style CSS? Dynamic Drive CSS Library- CSS3 Hover Image Gallery. CSS3 Hover Image Gallery Author: Dynamic Drive A sleek image gallery that takes advantage of CSS3 animation, shadows, and the "transform" property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user. The hover effect currently works best in Google Chrome, Safari 4+, and Opera 9.5+. In FF 3.6, the CSS animation is skipped, while in IE, the entire effect isn't visible. The CSS: Code Info Rate this code: Date Posted: 09/08/2010 Revision History: None Usage Terms: Click here Your Comments (7) Got a question or need help customizing this CSS code? Comment Pages 1 of 1 pages Commenting is not available in this weblog entry.