css如何定位一个div的位置不变

在网页设计过程中，经常会遇到需要定位某个元素的位置不随页面滚动而改变的情况，例如要在页面底部展示一个悬浮的广告栏。在CSS中，我们可以使用position属性来实现这一目标。

position属性有四种取值：static、relative、absolute和fixed。其中，static是默认值，表示元素按照正常流排列，如果不设置position属性，则元素都是static定位。relative是相对定位，元素仍按照正常流排列，但可以通过top、bottom、left、right属性来相对调整其位置。

div {
  position: relative;
  top: 100px;
  left: 50px;
}

上述代码表示将div元素相对于其正常流位置，向下移动100像素，向右移动50像素。注意，相对定位的元素仍然占据原本在正常流中的位置，因此其后面的元素仍然会遵循正常流排列，可能会覆盖到我们定位的元素。

而absolute是绝对定位，元素脱离正常流，不再占据文档流中的位置，它不会对其他文档元素产生影响。

div {
  position: absolute;
  bottom: 0;
}

上述代码意思是将div元素在页面底部展示，bottom属性指定了元素底部和页面底部的距离为0。此时，其他文档元素的位置会自动调整，避免与绝对定位元素产生重叠。

最后，fixed定位与absolute类似，也是绝对定位，但是它始终按照相对于浏览器窗口的位置进行定位。我们可以使用top、bottom、left、right属性来指定它相对于浏览器窗口的位置。

div {
  position: fixed;
  bottom: 0;
  right: 0;
}

上述代码表示将div元素定位在屏幕右下角。无论页面是否滚动，该元素始终在屏幕右下角。

总之，通过使用position属性，我们可以轻松实现元素的定位，为网页设计带来更多的可能性。