CSS定位

1.什么是定位

CSS 定位是指使用 CSS 属性来确定元素在网页上的位置和布局方式。它可以使元素在网页上按照您想要的方式显示，从而实现复杂的布局。

2.定位的几种方式

1. 绝对定位（Absolute Positioning）：使用 position: absolute; 属性将元素从文档流中移除，并将其放置在特定的位置，相对于其最近的具有定位属性的父元素。

2. 相对定位（Relative Positioning）：使用 position: relative; 属性将元素相对其原始位置进行定位。它仍然在文档流中，但可以通过设置 top、right、bottom 和 left 属性来移动。

3. 固定定位（Fixed Positioning）：使用 position: fixed; 属性将元素固定在浏览器窗口的特定位置，而不受滚动的影响。

4. 浮动定位（Floating）：使用 float 属性将元素浮动到一侧或两侧，使其脱离文档流并与其他元素在同一行上排列。

5. 粘性定位 ：通过 position: fixed 或 position: sticky 属性来固定或在特定情况下固定元素的位置。

这些定位方式可以结合使用，以实现复杂的网页布局。例如，您可以使用相对定位和绝对定位来创建响应式布局，使元素在不同的屏幕大小下自适应地显示。

3.代码演示

绝对定位

div {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

在上面的代码中，将一个 div 元素设置为绝对定位，并将其 top、left 属性设置为 50px，使其在浏览器窗口中显示在左上角。

相对定位

div {
  position: relative;
  top: 50px;
  left: 50px;
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

在上面的代码中，将一个 div 元素设置为相对定位，并将其 top、left 属性设置为 50px，使其相对于其原始位置向上和向左移动 50px。

固定定位

div {
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

在上面的代码中，将一个 div 元素设置为固定定位，并将其 top、left 属性设置为 50px，使其在浏览器窗口中固定在左上角，不受滚动的影响。

浮动定位

div {
  float: left;
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

在上面的代码中，将一个 div 元素设置为浮动定位，并将其 float 属性设置为 left，使其向左浮动。

粘性定位

.sticky {
  position: sticky;
  top: 0;
  background-color: lightblue;
  height: 50px;
}

 在上面的代码中，.sticky 类将元素固定在浏览器窗口的顶部，当窗口滚动时，元素将保持在顶部，直到窗口滚动超出其高度。