快速定位网页上的元素的路径_元素如何在网页上定位和行为

快速定位网页上的元素的路径

对于每个人都通过具有大量属性的单一显示开始Web开发定位元素之旅的每个人来说，这都很有趣。 到了所有元素开始以我们不想要的方式表现自己的时候。

这是因为我们是测试人员，在不了解属性的功能的情况下尝试尝试应用它。 这是一些想要很快了解CSS中position属性主要功能的建议。

在开始思考“ 所有位置适当性如何工作？ ”之前，我们需要了解网页上的内容框（图像中的灰色框）与视口（黑色边框分隔）的定位元素。 按内容框，它表示文档对象模块（DOM）条目文件，其中HTML和CSS代码将呈现为单个页面（图像中的灰色区域）。

但是，这个页面大部分并不适合所有台式机。 它需要水平滚动DOM，有时需要垂直滚动。

即使我们滚动页面上的内容，但视口始终保持不变。

因此，开发人员创造了根据Viewport定位的可能性。 它有助于将用户集中在页面的某些部分。 我们将在本文中基于这两个条件来定位元素，并且如果我们在tree类中分离display属性，将会更加清楚：

1. 基于DOM- static, relative, absolute
2. 基于视口 - fixed
3. 有条件的 - sticky

在本文中，我们将更多地讨论sticky属性，因为它是新引入的，对于新程序员来说很难理解。

让我们从默认的一个static默认值开始，到我们文档的所有Box洞察力。 在这种情况下，我们无法直接更改其位置以定义位置。 它将根据文档流进行定位。

Relative -元素见解DOM与页面另一元素相比的定位。 它将与文档流一起保留在DOM上，但可以通过指定边的特定距离（ Top, Left, Bottom, Right ）进行调节。 顺便说一句，它将在DOM中保持其初始位置。

Absolute中封闭的相对定位父级的定位元素。 如果找不到任何相对定位的父元素，则将其放置在DOM的主体部分中。 绝对定位的元素不会影响DOM的其他元素，并且会通过给侧面适当的值来进行控制。

Fixed –视口的定位元素库。 顾名思义，它将固定在桌面上，而不会反映在DOM元素上的滚动。

Sticky定位元素为静态，但是当满足某些条件时，它将变为基于固定视口的定位。 根据条件，它暗示元素在视口中的预期位置。 此位置直接取决于其所在的父框。

Sides变量是将条件从静态更改为固定的断点，这仅适用于父元素的范围。

例如，

if (viewport position == top: 0 ){
then property changes to fix
}

简单地说，如果鱼对水族馆足够大，它根本不会移动并且始终保持固定。 如果您想要获得理想的效果，请将水族箱变大或将鱼从水族箱中取出。 在这种情况下，它将被固定到其父元素中，并且如果其父元素开始移动，它将停止固定并开始像其他元素一样流动。 以下是粘性不起作用的三个错误：

• 父容器与声明位置粘滞的元素相同
• 如果父元素的溢出值不同，则可见。
• 元素的初始位置与元素的预期断点不对应。

翻译自: https://hackernoon.com/how-elements-positioned-and-behave-on-the-web-page-cj6b3wbd

快速定位网页上的元素的路径