[分享]css元素到窗口的距离

CSS元素到窗口的距离是网页设计中经常涉及的一个问题。它可以影响到网页排版的美观度和响应式布局的实现。如何计算和控制这个距离呢？我们需要先了解一些概念。假设我们有一个div元素，它的CSS代码如下： ...

CSS元素到窗口的距离是网页设计中经常涉及的一个问题。它可以影响到网页排版的美观度和响应式布局的实现。如何计算和控制这个距离呢？我们需要先了解一些概念。

假设我们有一个div元素，它的CSS代码如下：
div {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
}

这个div元素设置了宽高和绝对定位，并把它的顶部和左侧都放置在父元素中央。但它距离浏览器窗口的距离是多少呢？

由于这个div元素有绝对定位，它的位置是相对于最近的已定位的祖先元素来计算的。我们可以尝试给它的父元素添加一个相对定位：
div {
  position: absolute;
  top: 50%;
  left: 50%;
}
.parent {
  position: relative;
}
<div class="parent">
  <div class="box"></div>
</div>

现在我们的div元素已经相对于父元素定位了，它距离父元素的距离就是top和left属性的值。但它距离浏览器窗口的距离还需要再算一下。

我们可以使用JavaScript的offsetTop和offsetLeft属性，来计算元素距离浏览器窗口的距离：
const element = document.querySelector('.box');
const distanceFromTop = element.offsetTop;
const distanceFromLeft = element.offsetLeft;

这样我们就可以得到元素距离窗口顶部和左侧的距离。但有时候我们需要自行控制元素距离窗口的距离，比如实现响应式布局。此时，我们可以使用CSS的calc()函数：

常见的例子是：使一个元素居中，同时与浏览器窗口顶部有50px的距离。
.center {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px - 50px);
  left: calc(50% - 100px);
}

在这里，我们使用calc()函数计算了元素距离顶部的距离为50% - 元素高度的一半 - 50px。此时，元素就居中了并与窗口顶部有50px的距离。