2009-05-29 5 views
13

Si j'ai deux couches sur une page, split horrizontally, avec la deuxième couche chevauchant une partie de la première couche, est-il possible de faire "click through"?En cliquant couches/divs

J'ai des liens dans la première couche, que la deuxième couche chevauche, ce qui empêche les liens d'être cliquables. Existe-t-il un moyen de rendre l'affichage de la couche, mais d'avoir un clic, tout en ayant ses propres liens cliquables?

modifier:

Voici un exemple, avec le langage HTML et une feuille de style.

Les liens de test ne peuvent plus être cliqués lorsqu'ils sont en ligne avec l'en-tête de Layer3, mais en dessous, ils sont corrects. Y a-t-il un moyen de rectifier cela?

<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> 

Et le 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%; 
} 

Répondre

5

Il est impossible si vous voulez que les divs de rester dans leur courant x, y, (et surtout) z - seul le "top" couche est cliquable.


Addendum modifier post OP:

Pensez mise en page CSS comme si vous travaillez physiquement avec des bouts de papier (ce qui est beaucoup plus facile à visualiser si vous donnez toute votre « couche » divs un autre la couleur d'arrière-plan). Le moteur de rendu découpe un peu de papier dans les dimensions que vous lui donnez (ou cela fonctionne) pour chaque élément qu'il trouve. Il le fait dans l'ordre où il les rencontre en mettant chaque morceau de papier sur la page au fur et à mesure - le dernier élément sera sur le dessus.

Vous avez maintenant demandé au moteur de rendu de placer votre 3ème div dans une position où elle chevauche la 2ème. Et maintenant vous vous attendez à pouvoir "voir" le contenu couvert. Ne fonctionnerait pas avec du papier, ne fonctionnera pas avec HTML. Ce n'est pas parce qu'il est transparent qu'il ne prend pas de place.

Vous devez donc changer quelque chose.

En regardant votre CSS et le balisage (qui pourrait honnêtement être nettoyé, mais je suppose qu'il ya d'autres balises que vous n'êtes pas nous montrer ce qui le justifie) il y a deux façons de gagner facilement:

1). Définissez un z-index de -1 sur Layer3 - z-index est la façon dont vous pouvez modifier l'ordre de superposition par défaut (tel qu'il est rencontré). Cela déplace juste l'intégralité de Layer3 au-dessous du reste de la page afin que ce qui était caché soit exposé, mais aussi vice versa selon le contenu.

2). Modifiez la largeur de 100% à par ex. 80%, ou plus probable compte tenu de votre utilisation de pos: abs set gauche: 0px et droite: 199px; (Je devine que padding-left sur Layer2 est une largeur de colonne prévue?). Le coût de ceci est que votre couche 3 n'est plus 100% largeur

3). Google "disposition de colonne CSS" et de trouver un modèle qui reflète ce dont vous avez besoin et l'adapter. Chaque mise en page CSS qui peut être fait a déjà été faite un million de fois. Des techniques standard existent pour résoudre vos problèmes. CSS est difficile si vous n'avez pas construit l'expérience, donc tirer parti de l'expérience des autres. Ne réinventez pas les roues.

0

Il est difficile de dire sans voir un code.

Vous pouvez essayer de définir l'index z sur le calque inférieur, mais cela fonctionne sur les éléments qui ont été positionnés avec absolu, relatif ou fixe (position: absolu).


modifier après avoir vu le code:

Ajouter position: relative; indice z: 100; à #rightLayer.

Ou vous pouvez supprimer la largeur: 100% à partir de .Layer3. Vous voudrez peut-être refactoriser votre code et utiliser une disposition en deux colonnes pour #rightLayer et .Layer3.

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 { 
    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 { 
} 

html

<div id="Layer0"> 
    <div id="Layer2" class="Layer2"> 
     <h1>TEST</h1> 
    </div> 
    <div id="Layer1" class="Layer1"> 
     <h3 align="left">Brands</h3> 
    </div> 
    <div class="content"> 
     <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 id="Layer3" class="Layer3"> 
      <h1>Ed Hardy Auctions</h1> 
     </div> 
    </div> 
</div> 
+0

Je ne peux pas supprimer la largeur, car dans la page actuelle, les liens sont plus au milieu de la page. Je vais essayer comme vous le suggérez ... merci –

+0

Ahh, en changeant en position: relatif déplace le calque3 trop loin sur la page. Y a-t-il un moyen d'empêcher cela? –

4

Ce serait un travail gigantesque, mais c'est possible.
Vous devez capturer l'événement click sur le calque supérieur/div et trouver la position du curseur x-y.
Ensuite, trouvez tous les liens dans le calque/div sous le calque supérieur, et voyez si sa position sur l'écran tombe autour de la position actuelle de la souris.
Vous pouvez ensuite déclencher le clic du lien correspondant.
J'utiliserais jQuery (si vous ne l'avez pas déjà fait) pour cela, puis je reviendrais avec un tag jQuery si vous rencontrez des problèmes.

+1

Pas si gigantesque, je pense. Utiliseriez-vous offset(), width() et height() de jQuery? – Nosredna

+0

Non, ce n'est pas un gros travail du tout, et c'est l'approche correcte et unique. – Owen

0

Je suppose de l'exemple que les liens dans la couche de droite sont les seuls liens qui doivent être cliqués, et que vous n'avez pas de liens dans les autres couches. Si c'est le cas, vous pouvez résoudre le problème en changeant l'ordre z-index des divs. Layer1 et Layer3 ont une position absolue, donc si vous ajoutez un style de position (absolu ou relatif) à Layer2, vous serez capable de tirer ce div vers l'avant, en tirant également le div de rightlayer pour être dans une couche supérieure à Layer3.

j'ajouté ce qui suit à la CSS:

#Layer2 {  
    position: relative; 
    z-index: 1; 
} 

D'après ce que je peux voir qui laisse la configuration actuelle de page, la façon dont il est, mais tire tous les éléments (y compris les rightlayer avec les liens) à l'avant, de sorte que vous seriez en mesure de cliquer sur tous les liens en elle. À des fins de débogage, je suggère d'ajouter des couleurs d'arrière-plan à tous les différents calques pour avoir une idée de l'ordre z-index des différentes couches. Avec la couleur d'arrière-plan en place, il était assez facile de repérer le calque qui tombait sur les liens, mais aussi de vérifier que le nouvel ordre z-index rendait les liens disponibles.

Espérons que cela aide!

0

J'ai envoyé un bug il y a des années à Firefox Bugzilla disant qu'il y avait un bug dans Firefox.

Un ingénieur de Mozilla m'a dit que ce n'était pas vraiment un bug et que c'était le comportement correct selon les spécifications HTML/CSS. Malheureusement, je ne peux pas trouver le bug d'origine à référencer comme il y a environ 6 ans.

La raison pour laquelle j'ai soumis le bug était parce que je pouvais cliquer sur le div supérieur sur les liens ci-dessous en utilisant IE (6 je pense) mais Firefox ne me laisserait pas.

Comme d'habitude, il s'est avéré que IE avait une implémentation incorrecte et que Firefox fonctionnait comme prévu par la spécification.

Ce n'est pas parce qu'un div est transparent que vous devriez être capable de cliquer dessus.

Je ne sais pas comment vous pourriez contourner cela avec JavaScript ou CSS. Je prendrai du recul et je repenserai à ce que vous essayez de réaliser et à la façon dont vous essayez d'y parvenir.

Greg

0

Pouvez-vous pas simplement définir la largeur de la div à l'auto (la valeur par défaut de positionnement absolu - à savoir supprimer simplement la largeur: 100% de .Layer3).

De cette façon, la div sera seulement aussi large que nécessaire, plutôt que de chevaucher inutilement les liens.

28

Je pensais que je mettrais à jour ce que j'avais lutté avec cela pendant quelques heures et pense que j'ai trouvé une solution. En utilisant Jquery regardé, mais la propriété CSS:

pointer-events:none; 

... a fait exactement ce que je voulais.

+0

Bien que je ne puisse pas l'utiliser dans quelque chose de large, il fonctionne parfaitement dans l'extension Chrome sur laquelle je travaille (comme le chrome le supporte pleinement). Merci tas pour celui-là –

+0

Méfiez-vous: Cela brise d'autres comportements, bien que (comme les effets hover). –

+1

aussi ne fonctionnera pas dans les versions modernes de IE ou Opera – Andre

Questions connexes