說明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元素在一起的時候,每...