Z-index a dynamicznie tworzony kod w Pythonie

Mam nadzieję że to będzie dobra kategoria, bo problem jednak bardziej dotyczy CSS niż Pythona.

Na zaliczenie piszę węże i drabiny we Flasku. Html wyświetla (między innymi rzecz jasna) planszę, pionki, węże i drabiny. Planszę z pionkami tworzę jednocześnie (dzięki temu przy każdym renderowaniu widoku pionek wyświetla się na odpowiednim polu - divie), potem dodaję węże i drabiny.
Problem jest taki, że potrzebuję z-index w kolejności: plansza 1, węże 2, pionki 3, w tym momencie pionki wyświetlają mi się pod wężami.

Znacie jakikolwiek sposób na wciśnięcie węży w odpowiedniej kolejności?

Kod:

def tableCreator(pondPos1, pondPos2):

board = [
[1, 2, 3, 4, 5, 6, 7, 8],
[28, 29, 30, 31, 32, 33, 34, 9],
[27, 48, 49, 50, 51, 52, 35, 10],
[26, 47, 60, 61, 62, 53, 36, 11],
[25, 46, 59, 64, 63, 54, 37, 12],
[24, 45, 58, 57, 56, 55, 38, 13],
[23, 44, 43, 42, 41, 40, 39, 14],
[22, 21, 20, 19, 18, 17, 16, 15]
]
tableStart='<table id="board"><tbody>'
tableEnd='</tbody></table>'
tableRowStart = '<tr>'
tableRowEnd='</tr>'
p1pond = '<img class="pond" src="static\p1pond.png" alt="pionekgracza1" />'
p2pond = '<img class="pond" src="static\p2pond.png" alt="pionekgracza2" />'
c1pond = '<img class="pond" src="static\c1pond.png" alt="pionekkompa1" />'
c2pond = '<img class="pond" src="static\c2pond.png" alt="pionekkompa2" />'
table = tableStart

for i in board:
    table += tableRowStart
    for j in i:
        if j==1:
            table += '\n<td><div class="tile" id="t%d">' %j
            table += countPlayerPosition(j, pondPos1, p1pond)
            table += countPlayerPosition(j, pondPos2, p2pond)
            table += 'start</div></td>\n'
        elif j==64:
            table += '\n<td><div class="tile" id="t%d">' %j
            table += 'meta</div></td>\n'
        else:
            table += '\n<td><div class="tile" id="t%d">' %j
            table += countPlayerPosition(j, pondPos1, p1pond)
            table += countPlayerPosition(j, pondPos2, p2pond)
            table += '%d</div></td>\n' %j
    table += tableRowEnd
    table += '\n'

table += '<img id="ladder1" src="static\drabina1.png" alt="drabina1" />'
table += '<img id="ladder2" src="static\drabina2.png" alt="drabina2" />'
table += '<img id="ladder3" src="static\drabina3.png" alt="drabina3" />'
table += '<img id="ladder4" src="static\drabina4.png" alt="drabina4" />'
table += '<img id="snake1" src="static\waz1.png" alt="waz1" />'
table += '<img id="snake2" src="static\waz2.png" alt="waz2" />'
table += '<img id="snake3" src="static\waz3.png" alt="waz3" />'
table += '<img id="snake4" src="static\waz4.png" alt="waz4" />'     

return table

Fragment CSS:

.tile {
	font-size: 15px;
	background-color: white;
	border-style: groove;
	border-width: 2px;
	border-color: #A2A2A1;
	padding: 15px;
	height: 30px;
	width: 30px;
	margin: 1px;
}
#board{
	position: fixed;
	z-index: 1;
}

.pond {
	position: fixed;
	z-index: 3;
	margin-top: -10px;
}

#ladder1 {
	position: fixed;
	z-index: 2;
	margin-left: 230px;
	margin-top: 5px;
}

Wyświetlam przez routing jako proste:

{{ board|safe }}