Indem Sie durch die layers/divs
Wenn ich zwei Schichten auf einer Seite, eine split horrizontally, mit der zweiten Schicht überlappenden Teil der ersten Schicht, ist es möglich zu machen, die "click through"?
Habe ich links in der ersten Schicht, die zweite Schicht überlappt, die Haltestellen der links anklickbar. Gibt es eine Möglichkeit, die layer-Anzeige, sondern werden durch klicken, während immer noch mit eigenen links anklickbar?
edit:
Hier ist ein Beispiel mit html-und stylesheet.
Den test links unklickbaren bei inline mit dem Kopf in Ebene3, aber weiter unten, Sie sind in Ordnung. Gibt es eine Möglichkeit, dies zu korrigieren?
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
<a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>Und css -
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
position:absolute;
left:10px;
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}InformationsquelleAutor der Frage Joshxtothe4 | 2009-05-29
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ist nicht möglich, wenn Sie wollen, dass die divs bleiben in Ihrer aktuellen x -, y - (und vor allem) z - nur die "top" - layer ist anklickbar.
Nachtrag post-OP edit:
Denke, CSS-layout, als würden Sie körperlich arbeiten mit bits von Papier (dies ist viel einfacher zu visualisieren, wenn Sie geben alle Ihre "Schicht" divs eine andere Hintergrundfarbe). Die rendering-engine schneidet ein Stück Papier in den Abmessungen, die Sie geben es (oder es klappt) für jedes element, das es findet. Es tut dies, in der Reihenfolge, die es trifft auf Sie setzen jedes Stück Papier auf die Seite, wie es geht - das Letzte Element ist an der Spitze zu sein.
Nun haben Sie gesagt, die rendering-engine, um Ihre 3. div in einer position, wo es überschneidungen der 2nd. Und jetzt erwarten Sie, um in der Lage zu "sehen" die Inhalte abgedeckt. Würde nicht die Arbeit mit Papier, nicht mit HTML. Nur weil es transparent ist, bedeutet nicht, es ist nicht Platz wegnimmt.
So dass Sie haben, etwas zu ändern.
Blick auf CSS und markup (was ehrlich gesagt könnte gereinigt werden, aber ich nehme an es gibt auch noch andere mark-up bist du nicht zeigen uns, welche es rechtfertigt) es gibt ein paar einfache Gewinne Möglichkeiten:
1). Set z-index von -1 auf Layer3 - der z-index ist, wie können Sie ändern Sie die Schichtung, um vom Standard (wie festgestellt). Dieser bewegt gerade die Gesamtheit der Layer3 unten der rest der Seite, also das, was verborgen war, wird offen gelegt, aber auch Umgekehrt, je nach Inhalt.
2). Ändern Sie die Breite von 100% auf z.B. 80%, oder mehr wahrscheinlich Ihre Nutzung des pos-abs-set left:0px und rechts:199px; (ich vermute, dass padding-left auf Layer2 wird eine soll-Spalte der Breite?). Die Kosten für dieses ist, dass Ihre Layer3 ist nicht mehr 100% Breite
3). Google "CSS-Spalten-layout" und finden ein Muster, das wiedergibt, was Sie brauchen, und passen dass. Jedes CSS-layout, die getan werden kann, getan wurde eine million mal schon. Standard-Techniken existieren, die Ihre Probleme zu lösen. CSS ist schwer, wenn man noch nicht die Erfahrung, so nutzen Sie die Erfahrungen anderer. Nicht Räder neu erfinden.
InformationsquelleAutor der Antwort annakata
Dachte, ich würde aktualisieren Sie diese, wie ich zu kämpfen mit diesem für ein paar Stunden und denke, dass ich eine Lösung gefunden habe. Sah in der Verwendung von Jquery, aber die CSS-Eigenschaft:
...genau das Tat, was ich wollte.
InformationsquelleAutor der Antwort DrShamoon
Wäre es eine Mammut Aufgabe, aber es ist möglich.
Sie würde erobern müssen das click-Ereignis auf dem top-layer/div, und finden Sie die cursor-x-y-position.
Dann finden Sie alle links, die in die Ebene/div unter der obersten Schicht, und sehen, ob es die position auf dem Bildschirm fällt, um die aktuelle position der Maus.
Sie könnte dann auslösen, die auf der übereinstimmenden link.
Ich würde jQuery verwenden (wenn Sie nicht bereits sind) und dann die re-post mit einem jQuery-tag, wenn Sie laufen in Schwierigkeiten.
InformationsquelleAutor der Antwort dan richardson
Es ist schwer zu sagen, ohne zu sehen, einen code.
Sie könnten versuchen, Einstellung der z-index auf der unteren Schicht, aber das funktioniert auf Elemente, die Positionierung mit absolute, relative oder fixed (position:absolute).
Bearbeiten, nachdem er code:
Hinzufügen von position:relative; z-index:100; #rightLayer.
Oder Sie können entfernen Sie die width:100% aus .Layer3.
Möchten Sie vielleicht umgestalten von code und gehen mit einem zwei-Spalten-layout für #rightLayer und .Layer3.
css
html
InformationsquelleAutor der Antwort Emily
Gehe ich davon aus das Beispiel, dass die links in der rightlayer sind die einzigen links, die müssen angeklickt werden, und, dass Sie nicht links in den anderen Schichten. Wenn ja, könnten Sie lösen das problem durch ändern der z-index-Reihenfolge der divs.
Ebene1 und Layer3 position absolute, also, wenn Sie fügen Sie eine position Stil (absolut oder relativ) auf Ebene 2, Sie werden in der Lage sein zu ziehen, dass div-Element auf der Vorderseite, auch das ziehen der rightlayer div in eine höhere Schicht als Layer3.
Ich habe Folgendes in der CSS:
Aus, was ich sehen kann, lässt die aktuelle Seite einrichten, so wie es ist, aber zieht alle Elemente (einschließlich der rightlayer mit den links) auf der Vorderseite, so dass Sie wäre in der Lage, klicken Sie auf alle links in es.
Für debugging-Zwecke empfehle ich hinzufügen von Hintergrundfarben zu den verschiedenen Schichten, um eine Vorstellung von der z-index-Reihenfolge der verschiedenen Schichten. Mit der Hintergrundfarbe im Ort war es ziemlich leicht zu erkennen ist die Ebene, fiel auf einen der links, sondern auch, um zu überprüfen, dass die neue z-index-Reihenfolge lässt die links zur Verfügung stellen.
Hoffe, das hilft!
InformationsquelleAutor der Antwort ylebre
Legte ich einen Fehler, der vor Jahren in die Firefox-Bugzilla sagen, dass es diese sehr bug in Firefox.
Wurde mir von einem Mozilla-Ingenieur, dass dies nicht wirklich ein bug ist und dass es auf das richtige Verhalten gemäß der HTML - /CSS-Spezifikationen.
Leider kann ich nicht finden, den ursprünglichen Fehler zu verweisen, wie es war vor etwa 6 Jahren.
Dem Grund, den ich veröffentlicht habe war der Fehler da konnte ich klicken Sie sich durch die top-div auf die links unten, wenn Sie mit IE (6 glaube ich), aber Firefox ließ mich nicht.
Als üblich, es stellte sich heraus, hat der IE hatte die falsche Umsetzung und Firefox wurde wie vorgesehen funktioniert, indem das spec.
Nur weil ein div transparent ist, bedeutet nicht, Sie sollten in der Lage sein, um darauf zu klicken.
Ich bin mir nicht sicher, wie man das umgehen könnte mit JavaScript oder CSS. Ich würde einen Schritt zurück gehen und neu darüber nachdenken, was Sie zu erreichen versuchen, und wie Sie versuchen, es zu erreichen.
Greg
InformationsquelleAutor der Antwort Greg B
Können Sie sich nicht einfach auf die Breite des div auf auto (Standardeinstellung für die absolute Positionierung - D. H., löschen Sie einfach die width:100% aus .Layer3).
So das div nur so breit wie nötig, anstatt unnötig die überlagerung von links.
InformationsquelleAutor der Antwort Matt