Home > Article > Web Front-end > Introduction to the usage of position in html
Introduction to the usage of position in html
- 高洛峰Original
- 2017-03-07 11:29:423108browse
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!