A small introduction to the use of position in HTML
|
I just learned some html yesterday, and I couldn't wait to make a search bar on JD.com. I did make it, but when I was checking out the shopping cart, I didn't know how to add a number displayed on it. If I want the number to move with the shopping cart, I have to position them together. Positioning definitely requires position. First, set the position of the div with the number to absolute, which gives me a sense of layering. Because the parent tag of the position of the number is body, I can also set top and left to the desired position with the shopping cart. However, if I change the margin of the shopping cart, the two cannot move together, so I set the position of the shopping cart to 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 number will move with it... Copy code The code is as follows:<html> <head> <title>day03.html</title> <style type="text/css"> /*First write a position div*/ #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-align:center; line-height:20px;position: absolute; top:-15px;left:25px; } </style> </head> <body> <div id="car"> Go to the shopping cart to pay <div id="num">0</div> </div> </body> </html> |
>>: MySQL Series 14 MySQL High Availability Implementation
Recommend
CSS uses the autoflow attribute to achieve seat selection effect
1. Autoflow attribute, if the length and width of...
How to upgrade CentOS7 to CentOS8 (detailed steps)
This article uses a specific example to introduce...
Tic-Tac-toe game implemented in pure CSS3
Operation effect: html <div class="tic-ta...
Two methods to disable form controls in HTML: readonly and disabled
In the process of making web pages, we often use f...
Summary of various common join table query examples in MySQL
This article uses examples to describe various co...
Start a local Kubernetes environment using kind and Docker
introduce Have you ever spent a whole day trying ...
Nginx cache configuration example
When developing and debugging a web application, ...
Detailed explanation of the pitfalls of mixing MySQL order by and limit
In MySQL, we often use order by for sorting and l...
CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom
Preview address: https://ovsexia.gitee.io/leftfix...
Teach you how to build hive3.1.2 on Tencent Cloud
Environment Preparation Before starting any opera...
What qualities should a good advertisement have?
Some people say that doing advertising is like bei...
Detailed explanation of the use of MySQL sql_mode
Table of contents Preface sql_mode explained The ...
Markup language - specify CSS styles for text
Click here to return to the 123WORDPRESS.COM HTML ...
Detailed explanation of how to introduce custom fonts (font-face) in CSS
Why did I use this? It all started with the makin...
The complete code of the uniapp packaged applet radar chart component
Effect picture: The implementation code is as fol...