CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用
生活随笔
收集整理的這篇文章主要介紹了
CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
準備布局：
<!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .base-container{width: 500px;height: 500px;background-color:lightgray;border:1px dashed red; } .base-compare {width:200px;height:100px;background-color:yellow;border:1px solid purple; } .base-parent {width:300px;height:230px;background-color:green; } .base-child {width:200px; // 寬高同.base-compareheight:100px;background-color:cyan;border:1px solid purple; } </style> </head> <body> <div class="base-container"><!--測試容器--><div class="base-compare">我是參考div</div><div class="base-parent parent"><!--父級div--><div class="base-child child">我是子級div</div></div> </div> </body> </html>（1）父級為relative，子級為absolute時：
.parent{
? ? ? position:relative;
}
.child{
? ? ? position:absolute;
? ? ? top:30px; // 如果是百分比%，則相對于父容器的高度的百分比
? ? ? left:20px;
? ? ? // margin-top:30px; ?// 非%為單位時，等效，效果疊加；%為單位時，不等效！?
? ? ? // margin-left:20px; // 同上
}
（2）父級為static，子級為absolute時：
.parent{
? position:static;
}
.child{
? position:absolute;
? top:50px; // 50%; （單位為%和非%）都是相對于最近的relative容器而言
? margin-left: 50%; // 同上
}
（3）父級為fixed，子級為absolute時：
.parent{
? position:fixed;
}
.child{
? position:absolute;
? top:100%; // 相對于父容器的高度百分比
? right:10px; // 相對于父容器的右邊
}
?
?
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是银行借记卡？银行借记卡有哪些功能？
- 下一篇： CSS 基本样式