Introduction à l'utilisation de la position en HTML-tutoriel HTML-php.cn

Introduction à l'utilisation de la position en HTML

高洛峰

Libérer： 2017-03-07 11:29:42

original

3081 Les gens l'ont consulté

Je pense que tout le monde connaît l'attribut position en HTML. Il peut être utilisé pour effectuer des tâches que les balises ordinaires ne peuvent pas accomplir. Voici un bon exemple pour votre référence. Je viens d'apprendre du contenu HTML hier et j'avais hâte de créer une barre de recherche sur JD.com. Je l'ai finalement fait, mais lorsque j'ai effectué le paiement du panier, un numéro était affiché dessus et je l'ai fait. Je ne sais pas comment l'ajouter. Si vous souhaitez que les chiffres se déplacent avec le panier, vous devez les positionner ensemble. Tout d'abord, définissez la position de p du numéro sur absolue, ce qui donne une impression de superposition. car à ce moment-là, la balise parent de la position numérique est le corps, donc lors du réglage en haut et à gauche, vous pouvez également la définir sur la position souhaitée du panier. Cependant, si vous modifiez la marge du panier, les deux ne peuvent pas. déplacez-vous ensemble, vous définissez donc la position du panier. Devenez relatif, de sorte que l'étiquette parent de la position du numéro devienne le panier. Quelle que soit la façon dont la marge du panier est ajustée, les chiffres se déplaceront avec lui. ...

Le code est le suivant :

<html> 
<head> 
<title>day03.html</title> 
<style type="text/css"> 
/*首先写一个position的p*/ 
#car{ 
width:150px;height:30px; 
background: #999999; 
color:white;text-align: center; 
line-height: 30px;margin: 232px 300px; 
border:1px solid black;position: relative; 
} 
#num{ 
width:20px;height:20px;background: red; 
color:white;text-aligh:center; 
line-height:20px;position: absolute; 
top:-15px;left:25px; 
} 
</style> 
</head> 
<body> 
<p id="car"> 
去购物车付款 
<p id="num">0</p> 
</p> 
</body> 
</html>

Copier après la connexion

Pour plus d'articles sur l'utilisation de la position en html, veuillez faire attention au site Web PHP chinois !