Css Position定位 簡易版本

2022-01-10 23:39:12 字數 1080 閱讀 6807

準備前的知識:

定位只對塊級起作用。如div,p等元素是塊級元素,如果是內聯元素則可以先變成塊級元素,display:block即可。

開始講解:

定位共四種:static,fixed,relative,absolute.

第一種:static為div預設,top,left,bottom,right無用。

第二種:fixed為固定定位。

元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動.

fixed定位使元素的位置與文件流無關,因此不佔據空間。fixed定位的元素和其他元素重疊。

第三種:relative為相對定位

相對定位元素的定位是相對其正常位置。可以移動的相對定位元素的內容和相互重疊的元素,它原本所佔的空間不會改變。

第四種:absolute為絕對定位

絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於:

absolute 定位使元素的位置與文件流無關,因此不佔據空間。

absolute 定位的元素和其他元素重疊。

總結:序列

position定位屬性

是否佔空間

是否與元素重疊

1fixed

不佔  重疊2

relative

佔  可以控制top,left與其他元素重疊

3absolute

不佔重疊

常用技巧:

relative與absolute配合使用:

最外div使用relative定位,裡面用absolute定位。

html 定位 CSS Position定位

說明position 屬性指定了元素的定位型別。position 屬性的五個值 元素可以使用的頂部,底部,左側和右側屬性定位。所有的css定位屬性 bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。值 clip 剪輯乙個絕對定位的元素 cursor 顯示游標移動到指定的型別 lef...

css position 相對定位

html head style type text css h2.pos left h2.pos right style head body h2 這是位於正常位置的標題 h2 h2 class pos left 這個標題相對於其正常位置向左移動 h2 h2 class pos right 這個標題...

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性,此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...