Question

Just wondering if there is a better way to write this CSS? It repeats quite a lot, this is a simple example, does it have to be this way?

<style type="text/css">
    div#leftBlock
    {
        position:absolute;      
        z-index: 1;
    }
    div#rightBlock
    {
        position:absolute;
        z-index: 1;
    }
    div#centerBlock
    {
        position:absolute;
        z-index: 2;
    }
    div#animateblock
    {
        position:absolute;
        z-index: 3;
    }
</style>

...

<div id="leftBlock" onclick="leftClick()"></div>
<div id="rightBlock" onclick="rightClick()"></div>
<div id="centerBlock"  onclick="centerClick()"></div>
<div id="animateBlock"></div>

Answer 1

This perhaps:

#leftBlock, #rightBlock
{
    position:absolute;      
    z-index: 1;
}
#centerBlock
{
    position:absolute;
    z-index: 2;
}
#animateblock
{
    position:absolute;
    z-index: 3;
}

Edit added this: the most minimalist way would be to code the html like so (drop the ids):

<div class="layout" onclick="leftClick()"></div>
<div class="layout" onclick="rightClick()"></div>
<div class="layout centerBlock" onclick="centerClick()"></div>
<div class="layout animated" ></div>

and the css like so:

.layout {position: absolute; z-index: 1;}
.centerBlock {z-index: 2;}
.animated {z-index: 3;}

But that depends on your needs, as you may need the ids for something else.