元素的定位

元素的定位屬性：

在css中，定義元素的定位模式用的是position屬性，在position屬性中的屬性值有四個，分別是

static（靜態定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位）。

relative：相對於其原文件流的位置進行定位。

fixed：相對於瀏覽器視窗進行定位。

position僅僅用於定義元素以哪種方式定位，並不能確定元素的具體位置，所以需要用到偏移屬

性top、bottom、left、right。

top：頂部偏移量，定義元素相對於其父級元素上邊線的距離

bottom：底部偏移量，定義元素相對於其父級元素下邊線的距離

left：左側偏移量，定義元素相對於其父級元素左邊線的距離

right：右側偏移量，定義元素相對於其父級元素右邊線的距離

靜態定位：

靜態定位是元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置

，也就是元素在html文件流中的預設位置，且無法通過偏移屬性改變位置。

相對定位：

處於相對位置，相對於標準文件流中的位置，可以通過偏移屬性改變元素的位置，但是它在文件

流中的位置仍然保留。如圖下：

**如下：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1"
>
<
title
>定位
title
>
<
style 
type
="text/css"
>
body
.father
.child01,.child02,.child03
.child02
style
>
head
>
<
body
>
<
div 
class
="father"
>
<
div 
class
="child01"
>child-01
div>
<
div 
class
="child02"
>child-02
div>
<
div 
class
="child03"
>child-03
div>
div>
body
>
html
>

將元素依據最近的已定位的父級元素進行定位，若所有父級元素沒有定位，則依據根元素進行定位。

如圖下：

**如下：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1"
>
<
title
>定位
title
>
<
style 
type
="text/css"
>
body
.father
.child01,.child02,.child03
.child02
style
>
head
>
<
body
>
<
div 
class
="father"
>
<
div 
class
="child01"
>child-01
div>
<
div 
class
="child02"
>child-02
div>
<
div 
class
="child03"
>child-03
div>
div>
body
>
html
>

以瀏覽器視窗作為參照物來定義網頁元素，脫離標準文件流的控制，始終依據瀏覽器視窗來定義自

己的顯示位置，不管瀏覽器滾動條如何滾動，也不管瀏覽器視窗大小如何變化，該元素都會始終顯

示在瀏覽器視窗的固定位置。

z-index層疊等級屬性：

當多個元素同時設定時，定位元素之間可能會發生重疊，如圖下：

這時可以通過z-index屬性來調整重疊元素的堆疊屬性，z-index屬性的取值可以是0、正整數和負整

數，取值越大，定位元素在層疊元素中越居上。

我們通過調整child-03的z-index值將child-03堆疊在child-02的下面，如圖下：

**如下：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1"
>
<
title
>定位
title
>
<
style 
type
="text/css"
>
body
.child01
.child02
.child03
style
>
head
>
<
body
>
<
div 
class
="father"
>
<
div 
class
="child01"
>child-01
div>
<
div 
class
="child02"
>child-02
div>
<
div 
class
="child03"
>child-03
div>
div>
body
>
html
>

元素定位 Cypress 元素定位

cypress含有多種定位方式我們無需擔心因為定位導致測試失敗，cypress有獨一無二的定位策略能使你擺脫元素定位的噩夢。cypress專有選擇器 舉例 submitsubmitsubmit獲取元素方法 cy.get data cy submit click cy.get data test su...

元素的定位

css 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 x html 中的位置決定。塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距 邊框和外邊距調整...

元素的定位

position static 靜態定位 是元素預設定位方式，就是各元素在html文件流中的預設位置。注意 任何元素在預設狀態下都會以靜態定位來確定自己的位置，在靜態定位狀態下，無法通過邊偏移屬性 top,bottom,left,right 來改變元素位置。position relative 相對定...