CSS中子絕父相的情況
阿新 • • 發佈：2021-11-14
###子絕父相的概念
子絕父相的意思是在父類的position屬性是relative的情況下，子類的position屬性又是absolute的情況下，
那麼我們的子類這時其實不是在body中absolute而是在其父類的範圍中absolute，給父類設定邊界。
- 父類不使用relative的情況
紅色色塊會固定在藍色色塊的左上角，子元素使用margin屬性可以在改變自己位置的同時也會帶動父元素一起變化。
- 父類使用了relative的情況下
程式碼實現：
```
<style> .father{ background-color: teal; width: 300px; height: 300px; position: relative; margin: 0 auto; } .son{ background-color: white; width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body>```