Positioning can be a little tricky at first, but it is essential to creating your CSS self-portrait. What does the position property do? It specifies the type of positioning method used for an element. These four different positions values are: static, relative, fixed, or absolute. You can then position elements using the top, bottom, right, and left properties, but will not work unless you first set a position property.
Static: This is an HTML element default. Elements positioned "static" will not be affected by the top, bottom, right, and left properties.
Relative: An element positioned this way is positioned relative to its normal position.
Fixed: Even if the page is scrolled, an element will stay in the same place. You can also use the top, bottom, right, and left properties. Also, a fixed element will not leave a gap in the page.
Absolute: An element with an abolute position is positioned relative to the nearest positioned ancestor. If there are no positioned ancestors, it will move along with the scrolling page.
Now the elements you've created have somewhere to go!
Positioned elements can overlap other elements on a page. This is where z-index becomes helpful. The z-index property specifies the stack order of an element. The stack order can be either positive or negative. A high (number) z-index will appear in front of other elements. A element with a z-index of say, -1, will be placed behind other elements. This is especially helpful when layering multiple shapes/elements onto your self-portrait.
The border-radius property allows you to add rounded borders to elements. Cool, right? Now you can turn squares and rectangles into circles and ovals. You can use it on one corner or all four corners simultaneously. Now that you're not limited to using block-like shapes, your self-portrait will appear more realistic.
Want to transform an element? Just use the transform property. With this property, you can rotate, scale, move, and skew elements. What about transitions? The transition property allows delay in between transformations. Both of these properties can give life to your CSS self-portrait and make it more interesting and lively.
Well, now you know the basics of creating a pure CSS self-portrait. If you can master these skills, you can manipulate almost any element without much thought. Give it a try and see what you can come up with.