CSS文檔流

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

POSTION

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

position屬性值

絕對定位和相對定位的區(qū)別：

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

包含塊

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

定位元素層次關(guān)系

z-index : auto |number
?
檢索或設(shè)置對象的層疊順序。
auto：默認(rèn)值。
number:無單位的整數(shù)值?？蔀樨?fù)數(shù)
沒有設(shè)置z-index時，最后寫的對象優(yōu)先顯示在上層，設(shè)置后，數(shù)值越大，層越靠上；

定位案例

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

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

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; }

錨點

命名錨點鏈接的應(yīng)用：
?
命名錨點的作用：在同一頁面內(nèi)的不同位置進(jìn)行跳轉(zhuǎn)。
制作錨標(biāo)記：
1)給元素定義命名錨記名
語法：<標(biāo)記 id="命名錨記名"> </標(biāo)記>
?
2)命名錨記連接
語法：<a href="#命名錨記名稱"></a>

千鋒HTML5學(xué)院：HTMLCSS學(xué)習(xí)筆記（八）-- 寬高自適應(yīng)?zhuanlan.zhihu.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。