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
Summary of JavaScript JSON.stringify() usage
Table of contents 1. Usage 1. Basic usage 2. The ...
Summary on Positioning in CSS
There are four types of positioning in CSS, which...
React implements a highly adaptive virtual list
Table of contents Before transformation: After tr...
Vue implements the shake function (compatible with ios13.3 and above)
Recently, I made a function similar to shake, usi...
A brief introduction to the general process of web front-end web development
I see many novice students doing front-end develop...
Implementing WeChat tap animation effect based on CSS3 animation attribute
Seeing the recent popular WeChat tap function, I ...
Detailed explanation of the differences between js array find, some, filter, and reduce
Distinguish the differences between the filter, f...
Detailed explanation of commonly used nginx rewrite rules
This article provides some commonly used rewrite ...
Using jQuery to implement the carousel effect
This article shares the specific code for impleme...
MySQL paging query optimization techniques
In applications with paging queries, queries that...
Knowledge about MySQL Memory storage engine
Knowledge points about Memory storage engine The ...
Detailed explanation of how to introduce custom fonts (font-face) in CSS
Why did I use this? It all started with the makin...
Solution to abnormal connection table caused by inconsistent MySQL character sets
Table of contents 1. Solution 2. MySQL character ...
MySQL 8.0.17 decompression version installation and configuration method graphic tutorial
I'll record the problems I encountered during...
Detailed explanation of the role of brackets in AngularJS
1. The role of brackets 1.1 Square brackets [ ] W...