.ruler {
    position: absolute;
    background: #f0f0f0;
    z-index: 9999;
}
.top-ruler {
    width: 100%;
    height: 20px;
    top: 0;
    left: 0;
}
.left-ruler {
    width: 20px;
    height: 100%;
    top: 0;
    left: 0;
}
.tick {
    position: absolute;
    font-size: 10px;
    color: #666;
}
.top-ruler .tick {
    width: 1px;
    height: 10px;
    background: #000;
}
.left-ruler .tick {
    width: 10px;
    height: 1px;
    background: #000;
}