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
4 ways to view processes in LINUX (summary)
A process is a program code that runs in the CPU ...
Detailed analysis of the difference between Ref and Reactive in Vue3.0
Table of contents Ref and Reactive Ref Reactive T...
5 things to note when writing React components using hooks
Table of contents 01. Use useState when render is...
mysql root user cannot be authorized and solve the problem of navicat remote authorization prompt 1044
Look at the solution first #------------The probl...
Various types of MySQL indexes
What is an index? An index is a data structure th...
Button does not specify type as submit. Clicking the button does not jump to the specified URL.
Today, due to project requirements, js is needed t...
How to solve the problem of -bash: /usr/bin/yum: No such file or directory after typing yum in linux
After entering yum in linux, the prompt: -bash: /...
Detailed discussion of several methods for deduplicating JavaScript arrays
Table of contents 1. Set Deduplication 2. Double ...
Search optimization knowledge to pay attention to in web design
1. Link layout of the new site homepage 1. The loc...
Basic statements of MySQL data definition language DDL
MySQL DDL statements What is DDL, DML. DDL is dat...
Native JS music player
This article example shares the specific code of ...
MySQL optimization connection optimization
In the article MySQL Optimization: Cache Optimiza...
Solution to mysql login warning problem
1. Introduction When we log in to MySQL, we often...
A comprehensive understanding of Vue.js functional components
Table of contents Preface React Functional Compon...
Nginx dynamic and static separation implementation case code analysis
Separation of static and dynamic Dynamic requests...