SS 有兩個(gè)最重要的基本屬性，前端開發(fā)必須掌握：display和position。

display屬性指定網(wǎng)頁的布局。兩個(gè)重要的布局，我已經(jīng)介紹過了：彈性布局flex^[1]和網(wǎng)格布局grid^[2]。

本文介紹非常有用的position屬性。我希望通過10分鐘的閱讀，幫助大家輕松掌握網(wǎng)頁定位，說清楚瀏覽器如何計(jì)算網(wǎng)頁元素的位置，尤其是新引進(jìn)的sticky定位。

本文由國內(nèi)最大的在線教育平臺(tái)之一“騰訊課堂”^[3]贊助。他們現(xiàn)在啟動(dòng)了“騰訊課堂101計(jì)劃”^[4]，推廣平臺(tái)上的課程資源，有不少優(yōu)質(zhì)內(nèi)容。希望提高前端技術(shù)水平的同學(xué)，可以留意一下本文結(jié)尾的免費(fèi)課程信息。

一、position 屬性的作用

position屬性用來指定一個(gè)元素在網(wǎng)頁上的位置，一共有5種定位方式，即position屬性主要有五個(gè)值。

?static?relative?fixed?absolute?sticky

下面就依次介紹這五個(gè)值。最后一個(gè)sticky是2017年瀏覽器才支持的，本文將重點(diǎn)介紹。

二、static 屬性值

static是position屬性的默認(rèn)值。如果省略position屬性，瀏覽器就認(rèn)為該元素是static定位。

這時(shí)，瀏覽器會(huì)按照源碼的順序，決定每個(gè)元素的位置，這稱為“正常的頁面流”（normal flow）。每個(gè)塊級(jí)元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個(gè)位置就是元素的默認(rèn)位置。

注意，static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時(shí)top、bottom、left、right這四個(gè)屬性無效。

三、relative，absolute，fixed

relative、absolute、fixed這三個(gè)屬性值有一個(gè)共同點(diǎn)，都是相對(duì)于某個(gè)基點(diǎn)的定位，不同之處僅僅在于基點(diǎn)不同。所以，只要理解了它們的基點(diǎn)是什么，就很容易掌握這三個(gè)屬性值。

這三種定位都不會(huì)對(duì)其他元素的位置產(chǎn)生影響，因此元素之間可能產(chǎn)生重疊。

3.1 relative 屬性值

relative表示，相對(duì)于默認(rèn)位置（即static時(shí)的位置）進(jìn)行偏移，即定位基點(diǎn)是元素的默認(rèn)位置。

它必須搭配top、bottom、left、right這四個(gè)屬性一起使用，用來指定偏移的方向和距離。

div { position: relative; top: 20px;}

上面代碼中，div元素從默認(rèn)位置向下偏移20px（即距離頂部20px）。

3.2 absolute 屬性值

absolute表示，相對(duì)于上級(jí)元素（一般是父元素）進(jìn)行偏移，即定位基點(diǎn)是父元素。

它有一個(gè)重要的限制條件：父元素不能是static定位，否則定位基點(diǎn)就會(huì)變成整個(gè)網(wǎng)頁的根元素html。另外，absolute定位也必須搭配top、bottom、left、right這四個(gè)屬性一起使用。

/* HTML 代碼如下 <div id="father"> <div id="son"></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代碼中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基點(diǎn)是父元素，相對(duì)于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網(wǎng)頁的頂部向下偏移20px。

注意，absolute定位的元素會(huì)被“正常頁面流”忽略，即在“正常頁面流”中，該元素所占空間為零，周邊元素不受影響。

3.3 fixed 屬性值

fixed表示，相對(duì)于視口（viewport，瀏覽器窗口）進(jìn)行偏移，即定位基點(diǎn)是瀏覽器窗口。這會(huì)導(dǎo)致元素的位置不隨頁面滾動(dòng)而變化，好像固定在網(wǎng)頁上一樣。

它如果搭配top、bottom、left、right這四個(gè)屬性一起使用，表示元素的初始位置是基于視口計(jì)算的，否則初始位置就是元素的默認(rèn)位置。

div { position: fixed; top: 0;}

上面代碼中，div元素始終在視口頂部，不隨網(wǎng)頁滾動(dòng)而變化。

四、sticky 屬性值

sticky跟前面四個(gè)屬性值都不一樣，它會(huì)產(chǎn)生動(dòng)態(tài)效果，很像relative和fixed的結(jié)合：一些時(shí)候是relative定位（定位基點(diǎn)是自身默認(rèn)位置），另一些時(shí)候自動(dòng)變成fixed定位（定位基點(diǎn)是視口）。

因此，它能夠形成“動(dòng)態(tài)固定”的效果。比如，網(wǎng)頁的搜索工具欄，初始加載時(shí)在自己的默認(rèn)位置（relative定位）。

頁面向下滾動(dòng)時(shí)，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。

等到頁面重新向上滾動(dòng)回到原位，工具欄也會(huì)回到默認(rèn)位置。

sticky生效的前提是，必須搭配top、bottom、left、right這四個(gè)屬性一起使用，不能省略，否則等同于relative定位，不產(chǎn)生“動(dòng)態(tài)固定”的效果。原因是這四個(gè)屬性用來定義“偏移距離”，瀏覽器把它當(dāng)作sticky的生效門檻。

它的具體規(guī)則是，當(dāng)頁面滾動(dòng)，父元素開始脫離視口時(shí)（即部分不可見），只要與sticky元素的距離達(dá)到生效門檻，relative定位自動(dòng)切換為fixed定位；等到父元素完全脫離視口時(shí)（即完全不可見），fixed定位自動(dòng)切換回relative定位。

請(qǐng)看下面的示例代碼。（注意，除了已被淘汰的 IE 以外，其他瀏覽器目前都支持sticky。但是，Safari 瀏覽器需要加上瀏覽器前綴-webkit-。）

#toolbar { position: -webkit-sticky; /* safari 瀏覽器 */ position: sticky; /* 其他瀏覽器 */ top: 20px;}

上面代碼中，頁面向下滾動(dòng)時(shí)，#toolbar的父元素開始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值），#toolbar就自動(dòng)變?yōu)?code>fixed定位，保持與視口頂部20px的距離。頁面繼續(xù)向下滾動(dòng)，父元素徹底離開視口（即整個(gè)父元素完全不可見），#toolbar恢復(fù)成relative定位。

五、 sticky 的應(yīng)用

sticky定位可以實(shí)現(xiàn)一些很有用的效果。除了上面提到“動(dòng)態(tài)固定”效果，這里再介紹兩個(gè)。

5.1 堆疊效果

堆疊效果（stacking）指的是頁面滾動(dòng)時(shí)，下方的元素覆蓋上方的元素。下面是一個(gè)圖片堆疊的例子，下方的圖片會(huì)隨著頁面滾動(dòng)，覆蓋上方的圖片（查看 demo^[5]）。

HTML 代碼就是幾張圖片。

<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

CSS 代碼極其簡單，只要兩行。

div { position: sticky; top: 0;}

它的原理是頁面向下滾動(dòng)時(shí)，每張圖片都會(huì)變成fixed定位，導(dǎo)致后一張圖片重疊在前一張圖片上面。詳細(xì)解釋可以看這里^[6]。

5.2 表格的表頭鎖定

大型表格滾動(dòng)的時(shí)候，表頭始終固定，也可以用sticky實(shí)現(xiàn)（查看 demo^[7]）。

CSS 代碼也很簡單。

th { position: sticky; top: 0; }

需要注意的是，sticky必須設(shè)在<th>元素上面，不能設(shè)在<thead>和<tr>元素，因?yàn)檫@兩個(gè)元素沒有relative定位，也就無法產(chǎn)生sticky效果。詳細(xì)解釋可以看這里^[8]。

（正文完）

免費(fèi)前端全棧課程

初學(xué)者剛接觸前端，往往會(huì)被一大堆技術(shù)名詞、框架和工具，搞得眼花繚亂。

到底哪些技術(shù)是目前的主流技術(shù)棧，既能用于公司的開發(fā)實(shí)務(wù)，又能為自己的簡歷增添亮點(diǎn)？

下面就是一套目前主流的前端技術(shù)棧。

（1）Node.js：服務(wù)器端的 JavaScript 運(yùn)行環(huán)境，不管哪種前端開發(fā)，都必不可少的底層環(huán)境。

（2）Webpack：語法轉(zhuǎn)換工具，把 ES6/TypeScript/JSX 語法轉(zhuǎn)成瀏覽器可以運(yùn)行的代碼。

（3）Koa2：一個(gè)非常流行、簡潔強(qiáng)大的 Node.js 后端的 Web 開發(fā)框架。

（4）MongoDB：目前應(yīng)用最廣泛的非關(guān)系數(shù)據(jù)庫之一，功能豐富，用法較簡單。

（5）Vue 全家桶：

?Vue：前端基礎(chǔ)框架?Vuex：配套的前端狀態(tài)管理庫。?Vue Router：官方的路由插件，構(gòu)建單頁面應(yīng)用必不可少。?Vue CLI：腳手架工具，幫你快速上手 Vue 開發(fā)，無需再花多余時(shí)間去實(shí)現(xiàn)項(xiàng)目架構(gòu)。?Vant：有贊前端團(tuán)隊(duì)開發(fā)的輕量級(jí)移動(dòng)端 Vue 組件庫，讓你快速使用已經(jīng)封裝好的各種頁面組件。

看到這個(gè)名單，你是不是感到有點(diǎn)頭大，全部掌握它們需要多少時(shí)間?。?/p>

現(xiàn)在，騰訊課堂就有一門這樣的課程，內(nèi)容包含了所有這些工具，教你怎么用它們從頭完成一個(gè)全棧項(xiàng)目，親手做出一個(gè)手機(jī)端的移動(dòng)商城，是由 慕課網(wǎng)的精英講師--謝成老師講授。

該課程的制作單位是青盟科技。它是《騰訊課堂101計(jì)劃》重點(diǎn)推廣的優(yōu)質(zhì)機(jī)構(gòu)，已有7年 IT 行業(yè)教學(xué)經(jīng)驗(yàn)，培養(yǎng)收費(fèi)學(xué)員2000+，有超過72%的學(xué)員都進(jìn)入到名企大廠。如果你想了解課程的詳細(xì)內(nèi)容，獲取課程大綱，或者想接受系統(tǒng)的前端培訓(xùn)，可以登錄騰訊課堂查看“青盟科技”。

（完）

References

[1]彈性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]網(wǎng)格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“騰訊課堂101計(jì)劃”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]這里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]這里:https://css-tricks.com/position-sticky-and-table-headers/

ebDriver API提供了內(nèi)置方法來查找基于不同屬性的WebElement，例如ID，Name，Class，XPath，CSS Selectors，鏈接Text等。下面我們就針對(duì)這些方法進(jìn)行元素查找定位。

打開Chrome瀏覽器，按F12出現(xiàn)開發(fā)者工具選項(xiàng)，選擇Elements，優(yōu)先選擇Chrome的原因就是因?yàn)闉g覽器比較好用。

1. 鼠標(biāo)點(diǎn)擊下圖彈框中左上角的箭頭，再點(diǎn)擊頁面上要定位的元素

2. 對(duì)應(yīng)的html頁面上會(huì)顯示對(duì)應(yīng)的數(shù)據(jù)，并顯示灰色背景

3. 按Ctrl+F顯示出來搜索框，此處手寫元素標(biāo)簽定位

如果你手寫元素技能還有待提高的話，可以使用輔助工具來幫助你，Chrome有一個(gè)神器插件，可代替你手寫元素的困擾

ChpoPath插件下載地址：

https://pan.baidu.com/s/1FCoSQHC1YdBBpETF71Ldfw ； 99tk

ID定位

driver.find_element_by_id("kw").send_keys('你好')

NAME定位

driver.find_element_by_name("wd").send_keys('name')

CLASS_NAME定位

driver.find_element_by_class_name("s_ipt").send_keys('class_name')

TAG_NAME定位

這個(gè)是行不通的，因?yàn)橹貜?fù)的標(biāo)簽太多了，無法定位準(zhǔn)確

from selenium import webdriver
from selenium.webdriver.common.by import By

driver=webdriver.Chrome()
driver.get('https://www.baidu.com/')


try:
    driver.find_element_by_tag_name("input").send_keys('tag——name')
    print('找到了')
except Exception as e:
    print(f'么找到{e}')

我們使用tag_name定位，加了異常捕獲，運(yùn)行結(jié)果如下：

F:\virtualEnvironment\venv\Scripts\python.exe F:/git/AuomationTest/AuomationTestProject/webTestAuomation/element_localization.py
么找到Message: element not interactable
  (Session info: chrome=89.0.4389.72)


Process finished with exit code 0

實(shí)踐檢驗(yàn)了使用tag_name來定位是不靠譜的。

文本定位，link_text只針對(duì)含a標(biāo)簽的，不含a標(biāo)簽的使用，會(huì)拋錯(cuò)。

driver.find_element_by_link_text("新聞").click()

部分文本定位，partial_link_text也是只針對(duì)含a標(biāo)簽的使用，元素的部分文本內(nèi)容定位，不含a標(biāo)簽的使用，會(huì)拋錯(cuò)

driver.find_element_by_partial_link_text("吃喝").click()

萬能元素定位，也就是xpath和css定位，css定位后的代碼運(yùn)行起來的速度相對(duì)來說比xpath代碼運(yùn)行起來要快很多。

XPATH用法：

driver.find_element_by_xpath("xpath表達(dá)式")

xpath表達(dá)式有絕對(duì)路徑和相對(duì)路徑，通常我們都是使用相對(duì)路徑

1. 絕對(duì)路徑：/html/body/div[3]/div[1]/div[1]/div[1]/ul/li[9]/a

2. 相對(duì)路徑：//*[text()="吃喝玩樂"]

我們不推薦絕對(duì)路徑，因?yàn)榍岸舜a稍微更改就會(huì)影響到定位，推薦使用相對(duì)路徑

• 標(biāo)簽名+節(jié)點(diǎn)屬性定位

//a[@class="header-title"]

• 組合元素+下標(biāo)定位

//ul[@class="api-main"][1]/li/a[@class="list-con"]

盡量能不使用下標(biāo)就不要使用下標(biāo)定位，前端稍微修改代碼也會(huì)影響頗大

• 模糊定位contains，通常元素不怎么好找時(shí)，可以使用模糊定位

//ul[@class="api-main"]/li/a[contains(@class, "list-con")]

當(dāng)然模糊定位還有一些表達(dá)式：

• 文本定位，找不到一些唯一標(biāo)簽時(shí)，可以使用文本定位

//*[text()="吃喝玩樂"]

• 邏輯運(yùn)算定位，and、or

//ul[@class="api-main"]//*[@class="list-con" and text()="金融科技"]

• 軸定位

1. ancestor：爺爺節(jié)點(diǎn)
2. parent：父級(jí)節(jié)點(diǎn)
3. preceding：當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之前的所有節(jié)點(diǎn)
4. preceding-sibling：當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之前的所有節(jié)點(diǎn)兄弟節(jié)點(diǎn)，同級(jí)的
5. following：當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之后的所有節(jié)點(diǎn)
6. following-sibling：當(dāng)前元素節(jié)點(diǎn)標(biāo)簽之后的所有節(jié)點(diǎn)兄弟節(jié)點(diǎn)，同級(jí)的

//ul[@class="api-main"]//*[text()="交通地理"]/parent::li//following-sibling::li//a

CSS用法：

driver.find_element_by_css_selector("css表達(dá)式")

• class屬性的直接 .元素屬性

.api-main-list

• id屬性的直接 #元素屬性

#password-o

• 直接元素定位

[class="api-main"]

• 層級(jí)組合定位

[id="s-top-left"]>[target="_blank"]

• 開頭模糊定位

a[href^="https"]

• 結(jié)尾模糊定位

a[href$="com"]

• 包含模糊定位

a[href*="baidu"]

• 包含單詞模糊定位

[target~="_blank"]

• child的用法，實(shí)操后無法確定是不是已經(jīng)定到元素，但有些時(shí)候運(yùn)行代碼會(huì)成功，所以也挺無語的，css運(yùn)行是快，但是定位起來還是麻煩些...

.api-main:first-child：父級(jí)元素下第一個(gè)元素

.api-main:last-child：父級(jí)元素下最后一個(gè)元素

.api-main:only-child：父級(jí)元素下唯一一個(gè)子元素

.api-main:nth-child(下標(biāo))：父級(jí)元素下第幾個(gè)元素

關(guān)于css的元素定位，后面實(shí)操后再給補(bǔ)上，以上總結(jié)或許能幫助到你，或許幫助不到你，但還是希望能幫助到你，如有疑問、歧義，評(píng)論區(qū)留言會(huì)及時(shí)修正發(fā)布，謝謝

未完，待續(xù)...

一直都在努力，希望您也是！