Z-index is another css property that appears simple on the surface, but has some deeper rules that can cause confusion.
On the surface it may seem as simple as a positive z-index sits in front of a 0 z-index, which sits in front of a negative z-index. While that is true, there’s more to the overall equation about how a browser decides which elements display in front of others.
When people are new to css layouts there’s a tendency to gravitate toward positioning. Positioning seems like an easy concept to grasp. On the surface you specify exactly where you want a block to be located and there it sits. Positioning is a little more complicated than it first appears though. There are a few things that can trip up a newbie and a few things to understand before positioning becomes second nature.
You can do some great things with positioning, once you develop a deeper understanding of how it works.
CSS backgrounds are an important part of web design. The property is where you add the colors and images that sit behind your content, which controls much of the aesthetics of your site. Remove your CSS backgrounds and your site will probably be text on a white background.
While relatively easy to understand, CSS backgrounds often lead to some questions and confusion when it comes to pulling off specific techniques. Let’s see if we can clear up some of that confusion and then answer a few of those technique specific questions.
Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler.
And best of all floats really aren’t that hard to work with once you understand a few key points.
A couple of weeks ago when writing about css vs tables I mentioned it was a myth that cross browser css was hard to implement. I thought I’d take a deeper look into cross browser css today and offer some ideas and tips to make cross browser development easier.