Introduction to the usage of position in html

高洛峰
Release: 2017-03-07 11:29:42
Original
3082 people have browsed it

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>
Copy after login

For more related articles on the usage of position in html, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!