I believe everyone is familiar with the position attribute in HTML. It can be used to complete tasks that ordinary tags cannot complete. There is a good example below. You can refer to it.
I just learned some HTML content yesterday, and I couldn’t wait to make a search bar on JD.com. I finally made it, but when I was doing the shopping cart checkout, there was a number displayed on it and I didn’t know how to add it. , if you want the numbers to move with the shopping cart, you must position them together. Positioning definitely requires position. First, set the position of p of the number to absolute, which has a layered feel, because at this time The parent tag of the digital position is body, so when setting top and left, you can also set it to the desired position of the shopping cart. However, if you change the margin of the shopping cart, the two cannot move together, so you set the position of the shopping cart. Become relative, so that the parent tag of the position of the number becomes the shopping cart. No matter how the margin of the shopping cart is adjusted, the numbers will move with it...
The code is as follows:
<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>For more related articles on the usage of position in html, please pay attention to the PHP Chinese website!
function function usage
How to view stored procedures in MySQL
How to check deleted call records
The difference between insertbefore and before
What language is generally used to write vscode?
How to convert nef to jpg format
Ranking of the top ten digital currency exchanges
What is the core of a database system?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
