Category Archives: CSS
A classname to save, using negative magin to remove the "first" / "last" class in your list
It is common to create a list with a separator in between like this:
Item 1 | Item 2 | Item 3
One common way of doing this is create a list (ol / ul) then apply the border-left and add a class “first” to the first li setting the border to 0px. This is good, but [...]
Making z-index works
It is common to have element stacking at bottom no matter how large the z-index is. There are 2 things to check when it happens.
The position property in CSS
z-index only affect elements with position property set to “relative”, “absolute”, and “fixed”.The z-index values of the all the parent
Parent elements up the DOM tree
If you [...]
A play with imageless button
The final result
Open in new window
What it does
Just a basic markup and CSS which create an imageless button. It support zooming / changing font-size. But it is true that imageless button is bad in semantic markup compare to <a> / <input>, as the construct of the button is layers of <div>. If you compare the [...]
Working with z-index
What is z-index
When we talk about 3D, we have the x,y,z dimension. z-index is the third dimension on a web page which determine how element stack. It works like Photoshop’s layer. In general, larger z-index stack on top of smaller z-index. But there still other factors that will affect the layer stacking, which are the position property in CSS and the html structure.
How z-index works
It is often to find that z-index doesn’t work as expected. Sometimes it work on Firefox but failed in IE 6. The first thing to make z-index work is you need to position that element. You can set the position property to absolute, fixed, or relative (but not static). Below is series of samples to test on how z-index stacking works.