直播6-寫一個管理系統
阿新 • • 發佈：2021-01-07
下面介紹關於CSS中的幾種定位：
1、
static定位（靜態定位）
所有標籤的預設定位（即無定位），靜態定位的元素位於頁面的最底層，屬於標準流。
2、
relative定位（相對定位）
給標籤新增程式碼
.class_name {
position: relative;
}
那麼該標籤就是相對定位了，相對定位的標籤可以通過設定top、bottom、left和right屬性來調整其位置。
相對定位的標籤的移動位置是相對於該元素在文件流中的原來的位置。看下面的例子：
<style>
.clearfix::after {
content: ''; 效果如下
下面給box2設定相對定位
在上面的程式碼基礎上新增下面的程式碼
.container-wrapper div:nth-child(2):hover {
position: relative;
left: 10px;
top: 10px;
background-color: chartreuse;
}
這個時候box2就相對於自己之前在文件流中的位置進行定位。
注意：相對定位的元素會飄起來（位於文件流的上面一層），但是該元素不會脫離文件流，其他元素也不會佔據決定定位元素原來的空間位置。這一點和下面介紹的絕對定位相反。
3、
absolute定位（絕對定位）
給標籤新增程式碼
.class_name {
position: absolute;
}
那麼該標籤就是絕對定位了，絕對定位的標籤可以通過設定top、bottom、left和right屬性來調整其位置。
相對定位的標籤的移動位置是對於其最接近的一個具有定位設定的父級元素進行絕對定位，如果元素的父級沒有設定定位屬性，則依據 body 元素左上角作為參考進行定位。
還是上面的例子，將程式碼進行修改:
.container-wrapper div:nth-child(2):hover {
position: absolute;
left: 0px;
top: 0px;
background-color: chartreuse;
}
由於其父級元素沒有設定定位，所以他就相對於<body>元素進行定位，而且可以看到該元素已經脫離文件流了，其他元素會佔據它的位置。
現在給它的父元素設定一個定位:
.container-wrapper {
position: relative;
}
我們發現他就相對於其父元素進行定位了。
4、
fix定位（固定定位）
給標籤新增程式碼
.class_name {
position: fixed;
}
固定定位與絕對定位類似，但它是相對於瀏覽器視窗定位，並且不會隨著滾動條進行滾動。