昨天偶然看到一道面試題：
講講child1,child3的變化，為什麼？
<div>
<
div
class
='child1'
>
div>
<
div
class
='child2'
>
div>
<
div
class
='child3'
>
div>
div>
.child2
當元素未設定float、position都為static的情況下，遇到重疊被覆蓋的時候，給被覆蓋的元素設定transform樣式，被覆蓋的元素層級會被提公升，但是會受opacity屬性的影響。
元素應用了transform屬性之後，就會變得應用了position:relative乙個尿性，原本應該被覆蓋的元素會變成覆蓋其他元素。使用opacity可以恢復因transform對元素造成的層級（按渲染順序的層級）變化。當然，給元素設定position和z-index也可以達到同樣的效果。
固定定位position:fixed可以讓元素不跟隨瀏覽器的滾動條滾動，而且這種跟隨效果連它的兄弟們position:relative/absolute都限制不了。但是，position:fixed的固定效果在遇到transform時，會直接降級變成position:absolute.
當容器設定了溢位隱藏，其子元素溢位容器的部分自然會被隱藏，但是當子元素設定了絕對定位，脫離了正常文字流，在正常文字流中的位置不再存在，容器的溢位隱藏對這個絕對定位的子元素就沒有用了（當然，容器設定相對定位的情況另談）。當容器設定了transform屬性，這個時候overflow: hidden對這個絕對定位的子元素就會生效，子元素溢位容器的部分就被隱藏了。
當容器設定了溢位隱藏，其子元素溢位容器的部分自然會被隱藏，但是當子元素設定了絕對定位，脫離了正常文字流，在正常文字流中的位置不再存在，容器的溢位隱藏對這個絕對定位的子元素就沒有用了（當然，容器設定相對定位的情況另談）並且設定z-index也無法解決，無論子元素的層級設多高，都是一樣的結果。
至於那個面試題 第一條就可以解決啦！
參考：
React元素渲染
元素渲染 元素是構成react應用的最小單位。元素用來描述你在螢幕上看到的內容 const element 與瀏覽器的dom元素不同，react當中的元素事實上是普通的物件，reactdom可以確保瀏覽器的資料內容與react元素保持一致。頁面中新增乙個id root 的div 在此div中的所有內...
vue中2種直接對元素渲染的方法
上面的整個div都會被render或template的渲染內容替換掉。在官網教程裡，在對html元素進行渲染時，都是先定義乙個元件。然後使用已定義的元件，通過示例化的方式進行元素的渲染。如果要渲染的內容本來就很簡單而且不需要重用，就可以直接在例項化vue物件時指定渲染內容。直接在例項化vue物件時，...
如何對多個屬性進行transform
w3school對transform的介紹很簡單 transform none transform functions transform的預設值是none 其所舉的例子也只是對乙個值進行過渡，其實還可以對多個值同時進行過渡，寫法如下 transform transform functions tr...