css 有三種基本的定位機制
position 屬性指定了元素的定位型別。
position:static; 靜態定位（預設值）
position:relative; 相對定位
position:absolute; 絕對定位
position:fixed; 固定定位
position:sticky; 粘性定位
定位的參照物
position:relative;參照物：當前元素在文件流中的位置，不脫離文件流。
position:absolute;參照物：body或者距離當前元素最近的包含塊，脫離文件流。
position:fixed;參照物：瀏覽器視窗，脫離文件流。
position:sticky;參照物：沒有觸發滾動條前與relative相同，觸發滾動條後與fixed相同。
包含塊的概念
就是為絕對定位元素提供座標，偏移和顯示範圍的參照物，即確定絕對定位的偏移起點和百分比長度的參考。
預設狀態下，body是乙個大的包含塊，所有絕對定位的元素都是根據視窗來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含元素塊以後，對於被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
定義元素為包含塊
給絕對定位元素的父元素新增宣告position:relative;
乙個demo了解定位
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
*body
div.box1
.box2
.box3
.box4
.box4_1
.box5
.box6
style
>
head
>
>
class
="box1"
>
靜態定位static
div>
class
="box2"
>
相對定位relative
div>
class
="box3"
>
絕對定位absolute，包含塊為body
div>
class
="box4"
>
box4
class
="box4_1"
>
絕對定位absolute，包含塊為當前元素box4_1最近的包含塊box4
div>
div>
class
="box5"
>
固定定位fixed
div>
class
="box6"
>
粘性定位
div>
body
>
html
>
auto：預設值。遵從其父物件
number:無單位的整數值。可為負數
沒有設定z-index時，最後寫的物件優先顯示在上層，設定後，數值越大，層越靠上；
較大數值的物件會覆蓋在較小數值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值，那麼將依據它們在html文件中宣告的順序層疊。
此屬性僅僅作用於 position 屬性值 relative 或 absolute,fixed 的物件。錨點定義：是網頁製作中超級鏈結的一種，又叫命名錨記。命名錨記像乙個迅速定位器一樣是一種頁面內的超級鏈結，運用相當普遍。
命名錨點的作用：在同一頁面內的不同位置進行跳轉。
製作錨標記：
給元素定義命名錨記名
語法：《標記 id=「命名錨記名」>
命名錨記連線 語法：
ie瀏覽器寫法：filter:alpha(opacity=value);取值範圍 0-100
相容其他瀏覽器寫法：opacity:0.value;(value的取值範圍0-1 0.1,0.2,0.3-----0.9—1)
HTML CSS學習筆記 九
css樣式設定小技巧 水平居中設定 定寬塊狀元素 可以通過設定 左右margin 值為 auto 來實現居中的。例如 我是定寬塊狀元素，哈哈，我要水平居中顯示。div body css divstyle 水平居中設定 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...
html css學習筆記 4 定位
如何讓圖1中的div2移動到如圖2上的位置 思路 哪些css命令能夠影響盒子顯示的位置呢？relative相對定位 定位偏移量 position relative 相對定位 a 不影響元素本身的特性 b 不使元素脫離文件流 c 如果沒有定位偏移量，對元素本身沒有任何影響 定位元素位置控制 top r...
（9）HTML CSS筆記（定位 ）
1 定位 在網頁中，我們是用來確定位置的。position 方位值 static 靜態定位 方位值是不起作用的 relative 相對定位 方位值起作用 absolute 絕對定位 方位值起作用 參考係 除了靜態定位之後，其它都可以作為參考 如果沒有參考係，預設為body來進行參考 作為參考物需要滿...