辨析relative与absolute_html/css_WEB-ITnose
谈起它们，想必大家都不陌生。relative，相对定位嘛；absolute，绝对定位嘛。但是它们到底是个啥东东呢？
看看w3c的定义，见下表
定位 | 含义 |
relative | 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 |
absolute | 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 |
我靠，说了这一啪啦，好像有点模糊啊。
不用怕，团结就是力量，让我们一起，一步一步来解析它们吧。
一、relative
针对上面w3c对relative的定义，我们首先来写个demo。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>效果图如下：
结合代码，不知道大家发没发现我将”relative”通过设置它的定位后，向左移动了10像素，但是呢？它居然右边空出来的空间，没有被右边的” ,I’m over! ”挤过来。说明什么？
1、 相对定位后的元素仍然是在普通流中的；
2、 相对定位后的元素通过left，right，top， bottom属性，相对它原有的位置，进行相对偏移的；
3、 相对定位后的元素发生偏移后，它原来所占的空间仍然保留。
在上述代码中，不知道大家注意没有，我用的是这个元素包裹文本‘relative’的哦，乃行内元素，那有说明什么了呢？
猜测：position:relative不会改变元素的display。
是不是这样，我们在写个demo就湿了。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { /*将宽高设置为100px*/ width:100px; height:100px; border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>我将上述代码中添加了span元素的宽高，但是表现出来的还是行内元素的效果。
不服？
我再将上述代码改改，将span的display改成了inline-block，宽高任然设置为100像素，那么它表现出来的，也就是这样咯。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { /*将元素的span变为inline-block*/ display:inline-block; width:100px; height:100px; border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>说明position:relative是不会改变元素的display的哦。
二、absolute
针对上面w3c对absolute的定义，我们也来写个demo。不过就是将图一中的改为绝对定位，position:absolute。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; /*将position改为absolute*/ position:absolute; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>我靠，这是什么玩意。怎么会这样。稳住，我们拿标尺量一量，看看发生了什么。见下图：
图一
图二
图一为整个span元素的宽度，可以看出是80像素；图二为绝对定位后的裸露在页面的span元素的宽度，可以看出是70像素。
所以绝对定位，在这里是按着body的左上角进行的定位。
Why?
因为绝对定位是使用left，right，top， bottom属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。
在这里因为就一个span元素嘛，它的父级元素就是body咯。所以才会呈现出这图案咯。
而且正如w3c所说的那样，绝对定位是脱离文档流的，所以绝对定位元素的右边文本” ,I’m over! ”就会当它不在了，占用它的位置。
咦，相对定位不会改变元素的display，那么绝对定位呢？
绝对定位是会改变元素的display的哦。将其统一变成block，块级元素的模式。
不信？那么我们一起将上述绝对定位的代码改进改进，给 span元素宽高各设100像素。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; /*将position改为absolute*/ position:absolute; /*为absolute添加width和height*/ width:100px; height:100px; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>效果图见下：
我靠，看来绝对定位是比较屌，直接改变了元素的display，将其统一变为了block。
小节：
1、 绝对定位后的元素，脱离了文档流了，原来所占的空间也随之不在；
2、 绝对定位后的元素，通过left，right，top， bottom属性，相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位；
3、 绝对定位后的元素，将改变元素的display为block。
另：
不管将元素设置为相对定位还是绝对定位，它们都将覆盖住其他的元素内容，什么意思呢？
以position:absolute为例
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .normal { width:100px; height:100px; background:#FFC0CB; } .ourAbsolute { width:70px; height:70px; position:absolute; background:#008000; left:0; top:0; } </style> </head> <body> <div class="normal"></div> <div class="ourAbsolute"></div> </body></html>请见下图
我将绿色框设置的是绝对定位且top、left皆为0，那么它以body为起点，将覆盖粉红色的框。如果我想让粉红色的框，覆盖住绝对定位的绿色框呢？很简单，将绝对定位的z-index设置为0就欧克啦。
相对定位请自行修改代码，测试哦。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
