# 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屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面） 一個元素可以有正數或負數的堆疊順序： ``` ```