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
What are the attributes of the JSscript tag
What are the attributes of the JS script tag: cha...
How to implement checkbox & radio alignment
Not only do different browsers behave differently...
The complete process of Docker image creation
Table of contents Preface Creation steps Create a...
Explanation of mysql transaction select for update and data consistency processing
Transactions in MySQL are automatically committed...
MySQL 8.0.15 installation and configuration method graphic tutorial under Windows
This article shares with you the graphic tutorial...
React realizes secondary linkage effect (staircase effect)
This article shares the specific code of React to...
Linux firewall status check method example
How to check the status of Linux firewall 1. Basi...
MySQL 5.7.24 installation and configuration graphic tutorial
This article shares the installation and configur...
Let’s talk in detail about how browsers view closures
Table of contents Preface Introduction to Closure...
MySQL 8.0.18 installation and configuration graphic tutorial
Learning objectives: Learn to use Windows system ...
Detailed explanation of Vue life cycle functions
Table of contents Lifecycle Functions Common life...
Ubuntu 18.0.4 MySQL 8.0.20 installation and configuration method graphic tutorial
The installation and configuration method of MySQ...
WeChat applet realizes the effect of swiping left to delete list items
This article shares the specific code for WeChat ...
Summary of important components of MySQL InnoDB
Innodb includes the following components 1. innod...
How to use mysqladmin to get the current TPS and QPS of a MySQL instance
mysqladmin is an official mysql client program th...