位置决定一切

定位如何起作用？

其他属性怎么样？

定位如何起作用？

定位帮助我们将元素控制到一个地方。

以下是不同类型的定位。

  position: static; /* default */
  position: relative;
  position: absolute;
  position: sticky;
  position: fixed;
  position: inherit;

位置：静态

任何情况下的默认位置。它始终根据正常页面进行定位。

如果我将元素放置在顶部、右侧、底部或左侧，它会改变吗？

不会，只要您可以定位元素，它就会变得明确。

位置：相对

相对于其正常位置的定位。它允许指向我们决定的任何位置。
当我们没有为位置声明任何值时，它将表现得像静态的
。 我们可以使用顶部、右侧、底部和左侧位置来推动每个元素。

位置：绝对

一个位置可以将元素从文档流中移除，并根据容器进行定位，而容器也必须分配一个位置。
容器元素具有相对位置，不知道为什么它在浏览器中居中。 文本与图像重叠，只是因为它们都使用绝对位置。

位置：粘性

粘性定位是相对定位和固定定位的混合。元素在超过指定阈值之前将被视为相对定位，超过阈值则将被视为固定定位。- Mozilla 基金会，MDN Web 文档

带有图标（子项）和导航（子项）的导航栏容器（父项）设置为粘性位置

当你滚动浏览器时，粘性容器将继续流动出现。

在代码的初始阶段，元素的填充不会设置为自动，
您需要声明：

   nav-bar { 
      /* using vendor-prefixed (-webkit and -moz) for specific browser */
              position: -webkit-sticky;    /* for chrome browser */
              position: -moz-sticky;       /* for mozilla browser */
              position: sticky;
              top: 0;
              overflow: hidden;    /* to fix the height of the container */ 
   }

声明了 溢出属性。

问： 为什么它不起作用？

答： 您的浏览器不受支持。

请检查caniuse

位置：固定

与绝对位置类似，具有固定位置的元素将脱离文档流。主要区别在于：具有固定位置的元素始终相对于浏览器窗口定位。

我将段落元素移到容器中，结果是带有图像（子）的容器（父）与段落重叠。

其他属性怎么样？

从其父级继承具有相同值的位置。

   parent-element { padding: 15px; }
   child-element { padding: inherit; }

顶部、右侧、底部和左侧使我们能够将每个元素放置在设定的位置，例如相对、绝对和固定。

(-) 接受属性的负值。

z-index属性控制重叠元素的垂直堆叠顺序

我使用的应用程序：
Balsamiq
Header Image
Udemy Master Class Header
Reference for Sticky Position
Mozilla Foundation
Browser Tool for browser compatibility
caniuse