HTML入門學習筆記 CSS定位 8

2021-07-26 03:42:51 字數 1862 閱讀 1221

1.1相對定位 1.2絕對定位 1.3固定定位 1.4靜態定位

相對定位就是相對於自己以前在標準流中的位置來移動

3.1相對定位是不脫離標準流的, 會繼續在標準流中占用乙份空間

3.2在相對定位中同乙個方向上的定位屬性只能使用乙個

3.3由於相對定位是不脫離標準流的, 所以在相對定位中是區分塊級元素/行內元素/行內塊級元素

3.4由於相對定位是不脫離標準流的, 並且相對定位的元素會占用標準流中的位置, 所以當給相對定位的元素設定margin/padding等屬性的時會影響到標準流的布局

4.1用於對元素進行微調

4.2配合後面學習的絕對定位來使用

絕對定位就是相對於body來定位

2.1絕對定位的元素是脫離標準流的

2.2絕對定位的元素是不區分塊級元素/行內元素/行內塊級元素

1.預設情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點

2.如果乙個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點

2.1只要是這個絕對定位元素的祖先元素都可以

2.2指的定位流是指絕對定位/相對定位/固定定位

2.3定位流中只有靜態定位不行

3.如果乙個絕對定位的元素有祖先元素, 並且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點

子元素用絕對定位, 父元素用相對定位
相對定位不會脫離標準流, 會繼續在標準流中占用乙份空間, 所以不利於布局介面
預設情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化
只需要設定絕對定位元素的left:50%;

然後再設定絕對定位元素的 margin-left: -元素寬度的一半px;

固定定位和前面學習的背景關聯方式很像, 背景定位可以讓背景不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動

1.固定定位的元素是脫離標準流的, 不會占用標準流中的空間

2.固定定位和絕對定位一樣不區分行內/塊級/行內塊級

**預設情況下所有的元素都有乙個預設的z-index屬性, 取值是0.

z-index屬性的作用是專門用於控制定位流元素的覆蓋關係的**

1.預設情況下定位流的元素會蓋住標準流的元素

2.預設情況下定位流的元素後面編寫的會蓋住前面編寫的

3.如果定位流的元素設定了z-index屬性, 那麼誰的z-index屬性比較大, 誰就會顯示在上面

1.從父現象

1.1如果兩個元素的父元素都沒有設定z-index屬性, 那麼誰的z-index屬性比較大誰就顯示在上面

1.2如果兩個元素的父元素設定了z-index屬性, 那麼子元素的z-index屬性就會失效, 也就是說誰的父元素的z-index屬性比較大誰就會顯示在上面

HTML學習之CSS定位

css可以使用屬性position來實現定位 屬性值作用 具體說明 relative 相對定位 相對元素自己原有位置移動指定的距離,可以使用top left right bottom進行設定,其他元素的位置不會隨之改變 absolute 絕對定位 可以使元素參照介面或者相對父元素進行移動,可以使用t...

HTML學習筆記 定位

若成功,則 getcurrentposition 方法返回物件。始終會返回 latitude longitude 以及 accuracy 屬性。如果可用,則會返回其他下面的屬性。屬性描述 coords.latitude 十進位制數的緯度 coords.longitude 十進位制數的經度 coord...

HTML入門學習筆記 CSS屬性 2

格式 font style italic 取值 normal 正常的,預設就是正常的 italic 傾斜的 fs font style italic fsn font style normal 格式 font weight bold 單詞取值 bold 加粗 bolder 比加粗還要粗 lighte...