J'aimerais créer un élément divisé "flottant", pas dans le sens de la Propriété float , mais plutôt littéralement "flotteur":
4 Réponses :
Vous devez le faire à l'aide de positionnement et de z-index;
Position: absolu avec un z-index :
Yup, vous avez besoin de votre CSS pour regarder quelque chose comme ça
Si vous utilisez des indices Z très élevés comme ça, vous ne les utilisez probablement pas correctement. Habituellement, les gens les utilisent comme un moyen de dire «vraiment, réellement, mettez-le sur le dessus», mais alors que se passe-t-il si un autre élément a 100001? Voir ma "réponse" pour les exemples de code sur un meilleur moyen de gérer les index z.
Je suis tout à fait d'accord, je saisiais simplement «de gros» pour être désagréable de manière odieuse quant à l'importance du nombre d'être plus élevé.
Il s'agit d'un suivi de la réponse de Tatu, qui fonctionnera, mais utilise des index z dans une manière maladroite, mais très courante.
z-index détermine l'ordre d'empilement des éléments positionnés, par rapport à d'autres éléments positionnés. . L'ordre d'empilement est également relatif à l'ordre d'empilement des éléments parents. Donc:
Lorsque vous avez deux éléments de frère de sotage dans une page: Ceux-ci sont tous deux empilés selon leur parent - le corps Maintenant, lorsque ces éléments ont des enfants atteints de z-index, leur position dans la pile est déterminée par rapport à la position de leurs parents: Je trouve utile de penser aux enfants comme ayant un "point" z-index - donc l'enfant d'un élément avec Ceci est utile lorsque vous faites des choses "flottantes" comme des superpositions, des notes post-it, etc. Une configuration comme celle-ci est un bon départ: < PRE> XXX Tout ce que vous voulez flotter sur le dessus va dans "Superposition" - Les index Z de base conservent les deux "couches" séparées et vous pouvez éviter d'utiliser des index z de manière conforbles comme 999999 ou 100000 . , qui est à son "bas" par défaut de la pile. z-index: 1 a un index z de 1.x . De cette façon, vous pouvez voir que, même si je donne cette div un z-index de 100 000, il n'apparaîtra jamais sur un élément avec le parent z-index de 2. 2.x apparaît toujours sur le dessus de 1.x