html 定位 CSS Position定位

2021-10-12 05:13:22 字數 2803 閱讀 7438

說明position 屬性指定了元素的定位型別。 

position 屬性的五個值: 

元素可以使用的頂部,底部,左側和右側屬性定位。

所有的css定位屬性:

bottom :定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

值:clip:剪輯乙個絕對定位的元素

cursor:顯示游標移動到指定的型別

left :定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow:設定當元素的內容溢位其區域時發生的事情。

overflow-y:指定如何處理頂部/底部邊緣的內容溢位元素的內容區域 

overflow-x指定如何處理右邊/左邊邊緣的內容溢位元素的內容區域 

position指定元素的定位型別

right:定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

z-index設定元素的堆疊順序

示例改變游標:

示例title> head>請把滑鼠移動到單詞上,可以看到滑鼠指標發生變化:p>autospan>

crosshairspan>

defaultspan>

e-resizespan>

helpspan>

movespan>

n-resizespan>

ne-resizespan>

nw-resizespan>

pointerspan>

progressspan>

s-resizespan>

se-resizespan>

sw-resizespan>

textspan>

w-resizespan>

waitspan>

body>html>

static 定位

html 元素的預設值,即沒有定位,遵循正常的文件流物件。靜態定位的元素不會受到 top, bottom, left, right影響。

div.static
fixed 定位

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

p.pos_fixed

注意:fixed 定位在 ie7 和 ie8 下需要描述 !doctype 才能支援。fixed定位使元素的位置與文件流無關,因此不佔據空間。fixed定位的元素和其他元素重疊。

relative 定位 

相對定位元素的定位是相對其正常位置。

h2.pos_left

h2.pos_right

注意:

absolute 定位 

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

h2

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

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

sticky 定位

ticky 英文本面意思是粘,貼上,所以可以把它稱之為粘性定位。 

position: sticky; 基於使用者的滾動位置來定位。 

粘性定位的元素是依賴於使用者的滾動,在 position:relative 與 position:fixed 定位之間切換。 

它的行為就像 position:relative; 而當頁面滾動超出目標區域時,它的表現就像 position:fixed;,它會固定在目標位置。 

元素定位表現為在跨越特定閾值前為相對定位,之後為固定定位。 

這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。

示例:

示例title> div.sticky style>head>嘗試滾動頁面。p>注意: ie/edge 15 及更早 ie 版本不支援 sticky 屬性。p>我是粘性定位!div>滾動我p>來回滾動我p>滾動我p>來回滾動我p>滾動我p>來回滾動我p>div>body>html>
效果:

重疊的元素

元素的定位與文件流無關,所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了乙個元素的堆疊順序(哪個元素應該放在前面,或後面)

乙個元素可以有正數或負數的堆疊順序:

示例title> img

style>head>this is a headingh1>

效果:

筆記 html 定位

position absolute 相對,position relative 絕對定位,position static靜態預設定位,position fixed固定定位。相對定位和絕對定位是一對,必須一塊使用才能有效果,用相對定位的那乙個塊,參照物是絕對定位的那一塊,用top。left,right,...

html網頁定位

網頁地理定位有兩種 1.對於擁有 gps 的裝置,比如 iphone,html5 geolocation api 可以獲得使用者的地理位置,internet explorer 9 firefox chrome safari 以及 opera 支援地理定位。2.對於未擁有gps的裝置,比如pc,就可以...

HTML布局定位

html我總結了下定位方法大致有floa和position 1.floa浮動是讓元素脫離了文件流,不佔網頁的位置,講到了這兒我就不得不說下block元素和inline元素在文件流中的排列方式。1 block元素 塊級元素 有自己特有的形式如 block元素獨佔一行 多個block元素在一起的時候,每...