As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.
1. Absolute positioning inside a relative positioned element.
Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.
Read more about positioning:
2. Z-Index and positioning.
z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.
Read more about z-index:
3. Margin Auto
Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.
(Learn More…)
