Probleme mit z-index und position

sunshine09 · 1. April 2017

Hallo,

ich habe mit Hilfe aus diesem Forum die Hintergrundfläche mit einem Link versehen, mit dem ich zur Vorseite zurückkehren kann. Aber entweder liegt der Link ganz unten und wird vom darüber liegenden Wrapper, der vertikal und horizontal zentriert ist, verdeckt, oder aber er liegt ganz oben und verdeckt alles andere.

Ich hatte auch schon versucht noch eine Box über den Wrapper einzusetzen, in dem die drei Positionen für die Inhalte liegen und diese mit z-index ganz nach oben zu heben, aber es klappt nicht ....

Hier die entsprechende Seite

und hier die entsprechenden Ausschnitte von index.php

Spoiler anzeigen

</div>
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>

und template.css

/**/
#verlinkt {
overflow: hidden;
background: none;
display: block;
width: 100%;
height: 100%;
}

#verlinkt a {
position: absolute;
height: 100%;
width: 100%;
z-index: 6;
}

/*wrapper*/
#wrapper {
height: 880px;
margin: 0 auto; /* !!! */
text-align: left; /* !!! */
background: #808080;

width: 100%; /*Start vertikale Zentrierung*/
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); /*Ende vertikale Zentrierung*/

z-index: 0;
}

#wrapper a {
position: static;
height: 100%;
width: 100%;
}

#klammer {
position: relative;
width: 100%;
height: 100%;
background: yellow;
display: block;
}

#block1 {
width: 810px;
height: 30px;
background: none;
margin: 0 auto;
padding: 0px;
}

#position-601 {
width: 130px;
height: 30px;
background: none;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
z-index: 10;
}

#block2 {
clear: both;
width: 810px;
height: 810px;
background: none;
margin: 5px auto;
padding: 0px;
}

#position-901 {
width: 810px;
height: 810px;
background: none;
margin: 0px auto;
padding: 0px;
float: left;
z-index: 10;
}

#block3 {
width: 810px;
height: 30px;
background: none;
margin: 0 auto;
padding: 0px;
clear: both;
}

#position-501 {
width: 600px;
height: 30px;
background: none;
margin: 0px 0px 0px 0px;
padding: 0px;
z-index: 10;
}

Danke für eure Hilfe ...

Edit by in indigo66: Langen Code in den Spoler, siehe Foenregeln. Außerdem kann der Code auf der Live-Seite eingesehen werden und muss dann nicht extra gepostet werden.

Indigo66 · 1. April 2017

Wenn Dein Wrapper 100% breit ist, dann überlagert er auch zu 100% den Link und umgekehrt.
Das könnte eine Lösung sein:

Zitat

#wrapper {
height: 880px;
~~margin: 0 auto;~~
text-align: left;
background: #808080;
~~width: 100%;~~
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
left: 50%;
margin-left: -25%;
}

Alles anzeigen

sunshine09 · 2. April 2017

Vielen Dank, Tom!

Ich habe die Lösung nun dahingehend gefunden, dass ich den Wrapper auf die nötige Breite gesetzt und deine left und margin-left-Angaben übernommen habe! :)) Prima!

viele Grüße
Sunshine

Tags