# css rem单位 em单位 和定位 ``` <pre class="calibre15">``` 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。 em 子元素字体大小的em是相对于父元素字体大小 元素的width<span class="token">/</span>height<span class="token">/</span>padding<span class="token">/</span>margin用em的话是相对于该元素的font<span class="token">-</span>size <span class="token"><</span>div<span class="token">></span> 我是父元素div <span class="token"><</span>p<span class="token">></span> 我是子元素p <span class="token"><</span>span<span class="token">></span>我是孙元素span<span class="token"><</span><span class="token">/</span>span<span class="token">></span> <span class="token"><</span><span class="token">/</span>p<span class="token">></span> <span class="token"><</span><span class="token">/</span>div<span class="token">></span> div <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">40</span>px<span class="token1">;</span> width<span class="token1">:</span> <span class="token5">10</span>em<span class="token1">;</span> <span class="token6">/* 400px */</span> height<span class="token1">:</span> <span class="token5">10</span>em<span class="token1">;</span> border<span class="token1">:</span> solid <span class="token5">1</span>px black<span class="token1">;</span> <span class="token1">}</span> p <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">0.5</span>em<span class="token1">;</span> <span class="token6">/* 20px */</span> width<span class="token1">:</span> <span class="token5">10</span>em<span class="token1">;</span> <span class="token6">/* 200px */</span> height<span class="token1">:</span> <span class="token5">10</span>em<span class="token1">;</span> border<span class="token1">:</span> solid <span class="token5">1</span>px red<span class="token1">;</span> <span class="token1">}</span> span <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">0.5</span>em<span class="token1">;</span> width<span class="token1">:</span> <span class="token5">10</span>em<span class="token1">;</span> height<span class="token1">:</span> <span class="token5">10</span>em<span class="token1">;</span> border<span class="token1">:</span> solid <span class="token5">1</span>px blue<span class="token1">;</span> display<span class="token1">:</span> block<span class="token1">;</span> <span class="token1">}</span> rem rem是全部的长度都相对于根元素，根元素是谁？<span class="token"><</span>html<span class="token">></span>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。 html <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">10</span>px<span class="token1">;</span> <span class="token1">}</span> div <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">4</span>rem<span class="token1">;</span> <span class="token6">/* 40px */</span> width<span class="token1">:</span> <span class="token5">30</span>rem<span class="token1">;</span> <span class="token6">/* 300px */</span> height<span class="token1">:</span> <span class="token5">30</span>rem<span class="token1">;</span> border<span class="token1">:</span> solid <span class="token5">1</span>px black<span class="token1">;</span> <span class="token1">}</span> p <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">2</span>rem<span class="token1">;</span> <span class="token6">/* 20px */</span> width<span class="token1">:</span> <span class="token5">15</span>rem<span class="token1">;</span> height<span class="token1">:</span> <span class="token5">15</span>rem<span class="token1">;</span> border<span class="token1">:</span> solid <span class="token5">1</span>px red<span class="token1">;</span> <span class="token1">}</span> span <span class="token1">{</span> font<span class="token">-</span>size<span class="token1">:</span> <span class="token5">1.5</span>rem<span class="token1">;</span> width<span class="token1">:</span> <span class="token5">10</span>rem<span class="token1">;</span> height<span class="token1">:</span> <span class="token5">10</span>rem<span class="token1">;</span> border<span class="token1">:</span> solid <span class="token5">1</span>px blue<span class="token1">;</span> display<span class="token1">:</span> block<span class="token1">;</span> <span class="token1">}</span> <span class="token5">CSS</span>定位： <span class="token2">static</span> 定位 <span class="token5">HTML</span> 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top<span class="token1">,</span> bottom<span class="token1">,</span> left<span class="token1">,</span> right影响。 fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： relative 定位 相对定位元素的定位是相对其正常位置。 absolute 定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<span class="token"><</span>html<span class="token">></span><span class="token1">:</span> z<span class="token">-</span>index 重叠的元素 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z<span class="token">-</span>index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序： ``` ```