[分享]css中定位有哪些方式有哪些

CSS中定位有哪些方式有哪些？在CSS中，我们可以使用不同的方式来定位元素。最常用的定位方式包括相对定位、绝对定位和固定定位。相对定位相对定位是相对于元素原来的位置进行定位的。使用相对定位时，元素的位...

CSS中定位有哪些方式有哪些？
在CSS中，我们可以使用不同的方式来定位元素。最常用的定位方式包括相对定位、绝对定位和固定定位。
相对定位
相对定位是相对于元素原来的位置进行定位的。使用相对定位时，元素的位置仍然占据原来的空间，但是可以通过top、bottom、left和right属性进行微调。
例如，下面的CSS代码将一个DIV元素相对于原来的位置向下移动了20个像素：

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

绝对定位
绝对定位是相对于元素的最近祖先元素进行定位的。使用绝对定位时，元素将被从文档流中移除，因此不再占据原来的空间。
例如，下面的CSS代码将一个SPAN元素相对于其父元素DIV进行绝对定位：

div {
  position: relative;
}

span {
  position: absolute;
  top: 20px;
  left: 50px;
} 

固定定位
固定定位是相对于浏览器窗口进行定位的。使用固定定位时，元素将被从文档流中移除，因此也不再占据原来的空间。
例如，下面的CSS代码将一个NAV元素固定在浏览器窗口的右上角：

nav {
  position: fixed;
  top: 0;
  right: 0;
} 

除了这些常见的定位方式之外，还有一些其他的定位方式，如粘性定位（sticky），表格布局（table）、弹性盒子布局（flexbox）等。
总之，定位是CSS中非常重要的一个概念，而理解不同的定位方式对于制作网页布局和设计也是至关重要的。