Wenn .site auf position: relative; funktionieren die Links nicht mehr

Hi Forum,

in meiner Test-Page verwende ich das Theme twentytwelve, das ich durch ein Childtheme angepasst habe. U. a. habe ich die style.css so geschrieben, dass durch den title hindurch eine schräge Linie verläuft:

Dazu habe ich per CSS eine Border erstellt und die per transform: rotate(); gedreht, mit postion:relative; positioniert und mit z-index hinter den Title gelegt:

#lineThroughTitle {
    border-bottom: 1px solid #f00;
    position: relative;
    top: -24px;
    left: 0;
    z-index: -5;
    width: 25%;
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);

Damit ich sie aber noch vor dem Hintergrund hatte, habe ich .site aber auch auf position: relative; gesetzt und einen z-index von -10 vergeben, doch dann funktionierten die Links auf der Seite nicht mehr.

Kann mir jemand sagen, wie ich dieses Problem gelöst bekomme, also wie ich die Linie hinter den title bekomme und die Links noch funktionieren?

Zu finden ist das ganze hier.

Für jegliche Art von Kritik wäre ich dankbar.

Gruß

Karsten

Ich hab's hinbekommen, musste nur dem site-title nen positiven z-index vergeben. Und natürlich die negativen z-indexe entfernen und von der .site den position: relative; auch.