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
Installation tutorial of MySQL 5.7 green version under windows2008 64-bit system
Preface This article introduces the installation ...
JS uses clip-path to implement dynamic area clipping function
background Today, I was browsing CodePen and saw ...
How to implement Linux deepin to delete redundant kernels
The previous article wrote about how to manually ...
HTML checkbox Click the description text to select/uncheck the state
In web development, since the checkbox is small an...
Detailed explanation of the installation process of Jenkins on CentOS 7
Install Jenkins via Yum 1. Installation # yum sou...
jenkins+gitlab+nginx deployment of front-end application
Table of contents Related dependency installation...
How to build mysql master-slave server on centos7 (graphic tutorial)
This article mainly introduces how to build a MyS...
How to install FastDFS in Docker
Pull the image docker pull season/fastdfs:1.2 Sta...
A brief discussion on group by in MySQL
Table of contents 1. Introduction 2. Prepare the ...
Win10 installation Linux system tutorial diagram
To install a virtual machine on a Windows system,...
Specific use of MySQL binlog_ignore_db parameter
Preface: After studying the previous article, we ...
How to build a Vue3 desktop application
In this article, we will look at how to develop a...
Usage and execution process of http module in node
What is the role of http in node The responsibili...
Explanation of the basic syntax of Mysql database stored procedures
drop procedure sp_name// Before this, I have told...
Processing ideas for decrypting WeChat applet packages on PC in node.js
Table of contents Where is the source code of the...