CSS文檔流

• CSS 有三種基本的定位機制：普通流、浮動流、定位流。

POSTION

• position定位屬性，檢索或設置對象的定位方式

position屬性值

絕對定位和相對定位的區別：

1、參照物不同，絕對定位的參照物是包含塊（已定位的父元素），相對定位的參照物是元素本身默認的位置；
2、絕對定位將對象從文檔流中拖離出來因此不占據空間，相對定位不破壞正常的文檔流順序無論是否進行移動，元素仍然占據原來的空間。

包含塊

包含塊是絕對定位的基礎，包含塊就是為定位元素提供坐標，偏移和顯示范圍的參照物，即確定絕對定位的偏移起點和百分比 長度的參考；
?
默認狀態下，html是一個大的包含塊，所有絕對定位的元素都是根據窗口來定自己所處的位置和百分比大小的顯示的，如果我們定義了包含元素為包含元素塊以后，對于被包含的絕對定位元素來說，就會根據最接近的具有定位功能的上級包含元素來定位自己的顯示位置。
?
定義元素為包含塊：給絕對定位元素的父元素添加聲明position：relative；

定位元素層次關系

z-index : auto |number
?
檢索或設置對象的層疊順序。
auto：默認值。
number:無單位的整數值。可為負數
沒有設置z-index時，最后寫的對象優先顯示在上層，設置后，數值越大，層越靠上；

定位案例

元素在瀏覽器窗口居中的方法

讓一個元素始終在窗口水平、垂直位置居中：

div {width: 200px;height: 200px;background: #f00;position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto; }div {width: 200px;height: 200px;background: #f00;position: fixed;left: 50%;top: 50%;margin: -100px 0 0 -100px; }

錨點

命名錨點鏈接的應用：
?
命名錨點的作用：在同一頁面內的不同位置進行跳轉。
制作錨標記：
1)給元素定義命名錨記名
語法：<標記 id="命名錨記名"> </標記>
?
2)命名錨記連接
語法：<a href="#命名錨記名稱"></a>

千鋒HTML5學院：HTMLCSS學習筆記（八）-- 寬高自適應?zhuanlan.zhihu.com

總結

以上是生活随笔為你收集整理的ios fixed定位后内容不显示_HTMLCSS学习笔记（七）-- 定位与锚点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。