Maison > Article > interface Web > Introduction à l'utilisation de la position en HTML
Introduction à l'utilisation de la position en HTML
- 高洛峰original
- 2017-03-07 11:29:423114parcourir
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>Pour plus d'articles sur l'utilisation de la position en html, veuillez faire attention au site Web PHP chinois !