喽大家好，我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片，如果把这些图片和html文档放在一起，这样不光不美观，管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹，当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。

路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源，也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。

·首先是同级路径。同级路径不需要在html里面写任何符号，只需要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，所以在html的属性里直接写image，点jpg保存一下看看效果。

可以看到现在图片是正常展示的，同级路径下只需要在html属性里完整填写图像文件的名称就可以了。

·再来看第二个下级路径。当图像文件位于html文件下一集时，需要在html属性里完整填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。

→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。

→打开vscode，新建一个gtml文档，这里新增一个image标签。

→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开以后会发现里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，使用符号斜杠找到image，点gpg，看一下效果。此时图片也完整显示出来了。

→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。

这张图片应该怎样让它展示出来？一起来看一下。

→首先找到同级的images文件夹，使用符号斜杠，此时vscode会提供给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。

在浏览器中这两张图片都完美的展现出来了。

最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解？也就是图像文件是位于当前这个 hd ml文件的上一集。

在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里需要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片应该怎么做？在 sr c 属性里面使用点点杠。

这里 vs code提供了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修改sr c属性里面的值，使用点点杠。

此时是没有找到 amage 点 j p g 的文件，这个时候就需要重复刚刚的操作，点点杠就能找到需要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。

本期视频主要了解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束，感谢观看，下期再见。

天我们来聊聊网页爬虫中的一个核心技巧——精准定位网页元素。掌握了这一招，你的数据爬取效率将大大提升。常用的有以下几种：

以百度首页为例：

先做好基础工作

1. ID定位法

在网页的海洋中，每个元素都有自己独一无二的ID。通过元素的ID属性，我们可以轻松找到它。在谷歌浏览器中打开目标网页，检查元素，复制其ID，然后使用爬虫代码中的 find_element_by_id 方法，传入ID值，即可定位到该元素。例如，在百度首页，我们可以通过ID定位到导航栏的文本数据，并打印输出。

2. XPath定位法

XPath是一种强大的定位工具，适用于复杂的网页结构。通过复制元素的XPath表达式，我们可以在爬虫代码中使用 find_element_by_xpath 方法，精确地定位到元素，并提取所需数据。

3. 链接文本定位法

如果你需要定位的是网页中的链接，那么链接文本就是一个直观的线索。使用 find_element_by_link_text 方法，传入链接的完整文本，即可快速定位到链接元素。这里链接文本为“图片”，可定位到他的网址（href），也可以用PARTIAL_LINK_TEXT，结果一样的。

4. 标签名定位法

有时候，我们只需要找到页面中所有特定标签的元素。这时，我们可以使用 find_element_by_tag_name 方法，传入标签名，如"a"，来获取页面中所有的超链接元素。这里默认返回第一个记录，也可以返回全部到记录，用find_elements。

5. CSS选择器定位法

CSS选择器提供了一种更为灵活和强大的元素定位方式。通过结合标签名、属性名等CSS选择器语法，我们可以精确地定位到唯一的元素。例如，使用 find_element_by_css_selector 方法，传入"a.MNAV"，可以精确地定位到特定的链接元素。

结语

以上就是在网页爬取过程中常用的几种元素定位方法。每种方法都有其适用场景，收藏点个赞，有备无患，可以大大提高爬虫的效率和准确性。

SS 中的 position 属性只有几个有效值，但这些值会导致无穷无尽的设计可能性，这使得学习位置相当困难。在本文中，我将分解每个位置值并解释您需要了解的有关它们的所有信息。这甚至包括大多数文章/视频忽略的与位置相关的更晦涩的概念。

静态位置

首先，我们将介绍您可能从未听说过但一直使用的最简单的仓位值，这就是static仓位。static是 position 属性的默认值，本质上只是意味着元素将遵循正常的文档流并根据标准定位规则定位自身。

您未应用位置属性的任何元素都将是static，这意味着您使用的大多数元素都是静态定位的。static定位元素不能应用z-index、top、left、right或bottom属性。

.one {
  position: static;
}

相对位置

下一个最简单的仓位类型是relative仓位。位置元素的工作方式与位置relative完全相同static，但您现在可以向其添加z-index、top、left、right和bottom属性。如果您在不设置任何这些额外属性的情况下定位元素，您会注意到它看起来与定位元素relative完全相同。static这是因为relative定位元素也遵循正常的文档流，但您可以使用top、left、right和bottom属性来偏移它们。

.one {
  position: relative;
}

​

.one {
  position: relative;
  top: 30px;
  left: 10px;
}

从上面的示例中，您可以看到一个元素的工作方式就像static没有定义额外的属性时一样。但是，一旦添加了left, 或之类的属性top，您可以看到元素通过这些top, left,right和bottom属性相对于其正常位置偏移了自身。但是，您会注意到，其他元素不会移动以说明relative定位元素的偏移位置。这是因为所有其他元素都假设relative定位元素没有偏移，并且它们根据relative定位元素的位置来确定它们的位置，如果它是的话static。

现在在它自己的relative位置上并不是那么有用，因为您通常不想在不移动它周围的所有元素的情况下偏移一个元素。位置的主要用例relative是设置z-index元素的，或者用作absolute定位元素的容器，我们将在下面讨论。

绝对位置

该absolute位置是从正常文档流中完全移除元素的第一个位置。如果您给一个元素位置，absolute所有其他元素将表现得好像absolute定位的元素甚至不存在。

.one {
  position: absolute;
}

​

如您所见，元素二和三的布局就好像元素一从未存在过一样。您还会注意到第一个元素不再填满整个宽度。这是因为absolute定位元素的宽度默认为，auto而不是像 div 那样全宽。此外，默认情况下，absolute定位元素会将自身放置在文档中，如果它是静态元素，它通常会呈现，但我们可以使用top、left、right和bottom属性来更改它。

.one {
  position: absolute;
  top: 0;
  left: 0;
}

现在您可以看到我们的元素已移动到虚线边框的左上角。我使用这个虚线边框来表示整个屏幕，因为默认情况下，位置absolute元素将相对于主体定位自身，因此 atop和left0 表示该元素将出现在主体的左上角。您可以absolute通过将其父元素之一的位置设置为 以外的任何值来更改定位元素所在的元素static。这是最常用的relative位置之一。

.purple-parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  left: 0;
}

​

通过将紫色父元素设置为的位置，relative我现在强制absolute定位的子元素位于父元素的左上角而不是主体。relative和位置的这种组合absolute非常普遍。

固定位置

现在我们来到一个较少使用的位置，即fixed位置。fixedposition 有点像absoluteposition ，因为它从文档流中移除元素，但是fixedposition 元素总是相对于屏幕定位，无论其父元素在什么位置。

.one {
  position: fixed;
  top: 0;
  left: 0;
}

​

如您所见，我们的一个元素固定在页面的左上角。您还会注意到，当您滚动页面时，无论您滚动到哪里，它都会停留在页面的左上角。fixed这是和之间的主要区别absolute。

粘性位置

最终位置值为sticky。这个位置是两者的结合，fixed并且static结合了两者的优点。具有位置的元素sticky将像static定位元素一样工作，直到页面滚动到元素碰到指定的top、left、right或bottom值的点。然后它将像一个固定位置的元素一样，随着页面滚动，直到元素到达其容器的末尾。

.one {
  position: sticky;
  top: 10px;
}

首先，您会注意到 one 元素在文档流中的正常位置，就好像它是static. 一旦将页面滚动到一个元素的顶部距离页面顶部 10px 的位置，它就会像位置一样粘在页面顶部fixed。这将一直持续到元素到达紫色父容器的底部，在这种情况下它将停止与页面一起滚动。

stickyposition 是随页面滚动的导航栏、长列表中的标题以及许多其他用例的完美位置。

绝对/固定位置高级

现在，您需要了解关于元素fixed和absolute位置元素的一件事，因为它可能会导致一些奇怪的、难以发现的错误。定位的元素absolute将使用第一个具有非静态位置的父元素作为其容器来偏移自己，如果没有父元素具有除 之外的位置值，它将默认为主体static。我们已经知道了，但这并不是定义父容器的唯一方法。absolute定位元素还将检查设置了 、 或 属性的transform父filter级perspective。如果在父级上找到其中任何一个，它将使用该父级作为容器。

.purple-parent {
  transform: translateX(0);
}

.one {
  position: absolute;
  top: 0;
  left: 0;
}

​

在上面的例子中，我们的紫色父元素有一个static位置，但由于它有一个transform集合，它充当我们absolute定位子元素的容器。

同样的事情也适用于fixed位置元素。这也使得fixed位置元素的滚动行为不再起作用。

.purple-parent {
  transform: translateX(0);
}

.one {
  position: fixed;
  top: 0;
  left: 0;
}

即使我们滚动页面，您也会注意到fixedposition 元素卡在紫色父容器中，因为它有一个transform属性集。这通常不是您想要的，这就是为什么最好总是fixed在顶层定义位置元素以避免这种潜在的错误。

结论

CSS 中的 position 属性只有几个值，但每个值在何时以及如何使用它方面都有很多细微差别。这会导致很多复杂性，但也有很多潜力。