J'essaie d'avoir un menu de barre latérale chevauchant un contenu Je comprends que est un bon moyen de le faire sans avoir à faire chaque élément de menu un div , où l'élément de menu actif apparaît sur le div et les éléments non actifs apparaissent sous. L'intersection entre un ul et div serait petit, mais l'effet d'entrelacement créerait une illusion de profondeur. z-index s'applique uniquement aux éléments de frère de soeur. Donc ce qui suit ne fonctionne pas: div au même niveau que #content ?
4 Réponses :
Plutôt que de gâcher avec des indices en Z et des hacks css poilus, puis-je suggérer d'utiliser des astuces de fond? Une chose que vous pouvez faire est de donner au menu un arrière-plan répétant de manière à ce qu'une partie de celle-ci semble faire partie du contenu div. Ensuite, l'élément actif peut avoir un arrière-plan qui semble étendre dans le contenu. C'est beaucoup plus simple et évite beaucoup de maux de tête.
Je suggère au lieu d'utiliser Z-Index pour le faire, essayez de définir les largeurs des éléments Li en fonction de leur activité ou non. Si vous faites la navigation de barre latérale, affleurez-vous avec le contenu DIV, vous pouvez alors faire de manière gastronomique .active Li légèrement plus large de sorte qu'il chevauche le contenu DIV. De cette façon, cela ressemblera à la partie non active du menu sous le contenu DIV. Si je ne comprends pas votre idée correctement, vous pourriez peut-être me montrer un exemple. Bonne chance, ça sonne comme un effet nifty.
Donnez à la LI un z-index au lieu de #menu: et n'oubliez pas de les positionner relatif pour l'index Z à prendre effet. < / p>
vous voulez du Le seul moyen d'y parvenir est en train de s'assurer que Tous les et puis il Sera facile: il suffit de définir les propriétés li code> pour apparaître à l'avant d'un div code> et les autres à son dos. li code> et le divont code> appartiennent à la même Contexte d'empilement . Cela signifie que le ul code> ne doit pas créer de contexte d'empilement, donc ne définissez aucun z-index code> à celui-ci. Voir Quelles propriétés CSS créent un contexte d'empilement? pour ce qui devrait être évitée exactement. P> z-index code> sur le li code> et le div code> comme vous le souhaitez. Cependant, rappelez-vous que z-index code> s'applique uniquement aux éléments positionnés, par ex. Position: Relative Code>. P> <ul id="menu">
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="content"></div>
Je ne pense pas que vous puissiez obtenir cela fonctionner du tout sans gérer complètement votre balisage et introduire un CSS compliqué - gardez-le simple, mec.