定位：手動控制元素在包含塊中的精準位置
涉及的css屬性：position
position屬性
- static(預設值), 靜態定位（不定位）
- relative: 相對定位
- absolute: 絕對定位
- fixed: 固定元素
乙個元素，只要position的取值不是static，認為該元素是乙個定位元素，定位元素會脫離文件流(相對定位除外)
(1) 文件流中的元素擺放時，會忽略脫離了文件流的元素(跟浮動一樣,想象成在天上)
(2) 文件流中的元素計算自動高度時，會忽略脫離了文件流的元素 //(1)和(2)為脫離文件流元素特點)
特點：不會導致元素脫離文件流，只會讓元素在原來的位置上進行偏移 (相對於自身位置)
可以通過四個css屬性設定其位置 ，盒子的偏移不會對其他盒子造成任何影響
- left //一般以它位主
- right
- top //一般以它位主
- bottom
例 .box
特點： 寬高為auto，適應內容
定位的相對元素： 包含塊變化，從父級開始找祖先元素中第乙個定位元素，該元素的填充盒(padding盒[包含內容盒])為其包含塊，若找不到，則它的包含塊為整個網頁html(初始化包含塊)
比較絕對定位：其他情況和絕對定位完全一樣，區別在於包含塊不同：固定為視口 (瀏覽器的可視視窗)
定位下的居中(脫離文件流)：
（1）某個方向居中
1.定寬(高)
2.將左右(上下)距離設定為0
3.將左右(上下)的margin設定為auto;
注：絕對定位和固定定位中，margin為auto時，會自動吸收剩餘空間
例：left:0;
right:0;
top:0;
bottom:0;
margin:auto; (水平垂直都居中) //因為子盒的左邊要貼左邊，右邊要貼右邊,只能靠margin各吸收一半
（2）在水平方向只定了left的值為0,margin為自動不會居中，剩餘內容被right吸收了，不會給margin，
區別於常規流，要考慮left，right
設定z-index，通常情況下，該值越大，越靠近使用者
z-index可以是負數，如果是負數，則遇到常規流，浮動元素，則會被其覆蓋 // 只有定位元素設定z-index有效
補充
css 相對定位，絕對定位，固定定位
定位有三種，分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。head meta charset ut...
前端CSS 相對定位,絕對定位,固定定位
position relative 必須先宣告，自己要相對定位了，left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...
相對定位 絕對定位 固定定位
設定position屬性值為static的元素是乙個靜態定位元素，此值為預設值，即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素，其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...