Vue advanced: how to use absolute positioning( position:absolute )Perfect positioning layout and Its Precautions

No Silver Bullet 2020-11-13 07:25:44
vue advanced use absolute positioning


stay 《Vue Advanced ( One four two ):CSS- Static positioning , Relative positioning , Absolute positioning , The usage and difference of fixed positioning are explained in detail 》 In the article , Explained CSS Several common positioning methods . This blog post explains how to use absolute positioning to achieve perfect layout , And application precautions .

In the process of layout, we often use absolute positioning , Many beginners in the beginning with absolute positioning often can not achieve the desired effect , Because they tend to ignore the two conditions that use absolute positioning .

what ? Using absolute positioning requires conditions ?

Of course ! There's no code in the brain , I can't think for myself where I should be . For the convenience of use , When using absolute positioning, two conditions should be satisfied .

Before I talk about these two conditions , Let's start with a concept —— Standard flow .

What is standard flow ?

Standard flow (normal flow), Also known as document flow , Without the aid of any special css The arrangement of regular elements .

Layout rules

Floating and positioning (absolute,fixed) It will break away from the standard flow , That is, not subject to this set of rules .

Standard flow is actually a default layout rule . Here are some of the layout rules of standard flow elements :

  1. Block level elements in the standard stream (block)
  • Block level elements have one row exclusive , Arrange vertically from top to bottom ;
  • The width and height of block level elements can be set ;
  • Block level elements do not set the width of the case , The default width is its parent's 100%;
  1. In line elements in a standard stream (inline)
  • In line elements are arranged from left to right with other in line elements ;
  • The width and height of in line elements cannot be set , Its width is determined by its content ;
  1. Special in line elements
  • input And img It's an in-line element , But you can set the width and height ;
  1. Nested rules in standard flows
  • Block level elements can nest inline elements , On the contrary, we can't
  • ul( Unordered list ),ol( Ordered list ) You can only nest li,li You can nest any element .
  • dl( Definition list ) You can only nest dt( title ),dd( The title explains ) Elements .
  • textarea Only text can be nested in ;
  • p,h1~h6 Only text and inline elements can be nested ;
  • select( The form controls ) You can only nest option;
  • a Tags cannot be nested with interactive tags ;
  1. The problem of outer margin merging

Of two adjacent elements in a standard stream margin-bottom And margin-top There will be overlap .

Look at some of the layout rules above , Do you know what standard flow is ?

for instance , take float Come on , A box without a float is a standard flow , And the floating box is a nonstandard flow , because float Changed its default layout rules .

And what we're going to use Absolute positioning , It's for the nearest nonstandard flow box . ( Floating on a box , Relative positioning , Or absolute positioning , Then this box becomes a non-standard flow box )

Okay , Then it's time to use the two conditions that absolute positioning must satisfy .

When we're going to use absolute positioning , There must be two conditions :

  1. The parent element must be given a location attribute , It is generally recommended to use position:relative( namely : Set the parent element to relative position );
  2. Give child elements , Plus absolute positioning position:absolute( Set the child element to absolute position ); At the same time add direction attribute (top ,left,rigth,bottom)

Why should these two conditions be satisfied ?
Because absolute positioning is based on the parent element , Positioning . If he doesn't have a parent element , Or its parent element is not set position:relative Property, it will be based on the nearest nonstandard flow box as the reference point .

Absolute positioning takes the current element out of the document stream , It becomes a nonstandard flow . What does that mean ?

Actually , When it's standard flow , It's in place by default , When it's out of standard flow , He just floated , No longer occupy the original position .

If you want to position , If you don't set its parent to relative positioning ( Let the parent element become a nonstandard stream ), Or it has no parent element , Then it will be positioned on the top of the node , Take him as the benchmark .

If we meet these two conditions , It will be based on the parent element for absolute positioning .

In this way , It will save you a lot of trouble .

Let's take a look at specific examples :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Novice tutorial (runoob.com)</title>
<style>
h3
{
position:absolute;
left:50px;
top:50px;
color:#FFF;
}
.div_test{
width:500px;
height:200px;
background-color:#000;
}
.div_test2{
width:300px;
height:100px;
float:right;
background-color:blue;
//position:relative;// Relative positioning
}
</style>
</head>
<body>
<div class="div_test">
<div class="div_test2">
<h3> This is an absolute title </h3>
</div>
</div>
</body>
</html>

The code above defines a big div, It contains a little div, Small div There's a paragraph that uses absolute positioning . According to our code , We want this passage to be based on div_test2 To locate , But run it , Pictured :

 Insert picture description here

We can see , The text is positioned according to the top of the node . This is because its parent element does not set relative positioning .

Now set the relative positioning of its parent element .

The operation results are as follows :
 Insert picture description here

Biu~~~~~~~~~~~~~~~~~~~~????′éaé???è?¨??|é???gif??è?¨????è?????~~~~~~~~~~~~~~~~~~~~~~pia!

版权声明
本文为[No Silver Bullet]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple