Comment les éléments CSS se chevauchent-ils ?

Comment superposer des éléments CSS : 1. Définir des marges négatives pour les éléments. Les marges négatives peuvent réduire l'espace occupé par les éléments et les éléments suivants peuvent couvrir les éléments actuels. 2. Utilisez l'attribut position, en utilisant le positionnement relatif ; et le positionnement absolu permet à plusieurs éléments de se chevaucher.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

Comment les éléments CSS se chevauchent :

Méthode 1. Définir une marge négative

sur l'élément Définissez une marge négative pour que la position d'origine ne soit pas conservée après le déplacement

Une marge négative peut faire en sorte que l'élément prenne moins de place. L'élément suivant peut couvrir l'élément actuel

(il y en a deux ici. La largeur et la hauteur de p de même taille sont de 100 px (Figure 1). Après avoir défini -margin-bottom pour le p avec le nom de classe p ci-dessus (voir Figure 2), nous avons constaté que les éléments suivants couvraient la position de -margin )

Figure 1 :

Méthode 2. Utiliser le positionnement

positionnement relatif (position : relative) : la position d'origine est conservée et ne se coincera pas dans d'autres éléments, elle ne fera que se chevaucher

Positionnement absolu (position : absolue) : la position d'origine ne sera pas conservée et se détachera de la flux de pages

Exemple :

Effet :

Pour plus de connaissances liées à la programmation, veuillez visitez : Site Web d'apprentissage de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!