一张图看懂css的position里的relative和absolute的区别_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:43
Original
1222 Leute haben es durchsucht

position有以下属性:static、inherit、fixed、absolute、relative
前三个好理解好区分:
static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
nherit:从父元素继承 position 属性的值。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置)。

比较常用而且会引起初学者迷惑的是absoluterelative,它俩有什么分别呢?

一、先来看看W3C给的概念

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

relative:生成相对定位的元素,相对于其正常位置进行定位。

两者最核心的区别在于:absolute不受父元素里的其他元素影响,而relative会受到父元素里的其他元素影响。

二、一张图看懂absolute、relative的差别

代码:

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style> html,body,div,p{ margin: 0; padding: 0;} #baba { position: absolute; left: 50px; top:50px; width: 300px; height: 300px; background: blue;} #baba p{ background:lightblue;} #erzi { position: absolute; left: 50px; top:50px; width: 200px; height: 200px; background: yellow;}</style></head><body id="body"><div id="baba"><p></p><div id="erzi"><p></p></div></div><script>var baba=document.getElementById("baba"), erzi=document.getElementById("erzi"); baba.children[0].innerHTML="我是"+baba.id; erzi.children[0].innerHTML="我是"+erzi.id; </script></body></html>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage