Some understanding of absolute and relative positioning of page elements
|
From today on, I will regularly organize some small knowledge points. Some of them may be very simple, but they should all be useful. Regarding the absolute positioning and relative positioning of div, this is something that every front-end IT personnel will use. The so-called absolute positioning means that this thing is just there, and no matter how other things move, my position remains unchanged. To put it nicely, this is called integrity, but to put it bluntly, it is called roguery. Of course, absolute positioning is generally used for relative positioning. This is similar to a gang collecting protection fees. This area is under my jurisdiction, so the positions of the elements inside me are all for me and have nothing to do with the outside world. After talking about absolute positioning, let’s talk about relative positioning. Elements with this attribute are very spineless. I go wherever the leader goes and always revolve around the leader. Well, enough talk, let’s get back to the topic. Sometimes, we need to add something on a layer, but it is not as convenient to add it in a web page as in PS. We need to write a div (or other container) to store the contents of our layer, and then put it in the layer (div) where we want to place it, set the position in the style attribute of our parent layer to absolute, and finally set the position of the style of our newly created div to relative. This way my layer will be placed on top of the parent layer. The sublayer will have top, bottom, left and right properties, and we can position our elements through up, down, left and right. One thing to note is that if you don't define an absolute positioning layer, then your relative positioning is relative to the entire page. Axure RP, a commonly used prototyping software, uses global relative positioning. Actually, Axure RP is very easy to use. The weather is getting cooler, so please keep warm. |
<<: Comprehensive summary of MYSQL tables
>>: This article teaches you how to play with CSS combination selectors
Recommend
The implementation process of extracting oracle data to mysql database
In the migration of Oracle database to MySQL data...
Docker custom bridge docker0 and docker's opening, closing, and restarting command operations
question After the company migrated the server, t...
Vue Element UI custom description list component
This article example shares the specific code of ...
Split and merge tables in HTML (colspan, rowspan)
The code demonstrates horizontal merging: <!DO...
MySql multi-condition query statement with OR keyword
The previous article introduced the MySql multi-c...
linux No space left on device 500 error caused by inode fullness
What is an inode? To understand inode, we must st...
Summary and practice of javascript prototype chain diagram
Table of contents Prototype chain We can implemen...
Summary of knowledge points about null in MySQL database
In the MySQL database, null is a common situation...
js to realize a simple disc clock
This article shares the specific code of js to im...
Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet
I was playing with CentOS in a VMware virtual mac...
Install MySQL 5.7.17 in win10 system
Operating system win10 MySQL is the 64-bit zip de...
js realizes shopping cart addition and subtraction and price calculation functions
This article shares the specific code of js to re...
How to export CSV file with header in mysql
Refer to the official document http://dev.mysql.c...
How to generate a unique server-id in MySQL
Preface We all know that MySQL uses server-id to ...
Implementing calculator functions with WeChat applet
This article is a simple calculator written using...