时间戳

首页 > 解决方案 > 仅使用 CSS 向上移动元素

css - 仅使用 CSS 向上移动元素

问题描述

我正在为日历元素创建一个打印样式表（基于 fullcalendar.io）。日历在 y 轴上以 15 分钟的时隙显示。打印样式表做了两件事：

  1. 删除一天的前 8 小时（即 32 行，每行 15 分钟）
  2. 将 15 分钟槽的大小从 20 像素调整为 12 像素

在日历上呈现的事件是绝对定位的，因此当这种 css 调整大小发生时是不合适的。例如：

上午 9 点开始的活动将位于桌子的第 37 行，顶部为36*20 = 720px.

新位置需要考虑丢失的前 32 行(32*20=640)，然后考虑其余行小 40% (1-12/20) 的事实。

我可以使用 translateY 转换位置，但是我似乎无法同时使用固定值和当前顶部位置的百分比来完成这项工作，以便为每个事件创建通用规则。这可能只使用CSS吗？

编辑

我不确定如何使用代码片段进行演示，但它实际上归结为一个简单的问题：我需要将绝对定位的元素向上移动其当前最高值的 40%。

如果元素有top: 100px

我需要将它定位在 60px

如果有top: 250px

我需要将它定位在 150px

计算很简单，但我似乎无法使用 CSS 中的当前最高值

标签： css

解决方案

没有任何可能帮助我理解问题到底是什么的代码，我知道您想要上移一个具有固定值 (px) 和%值的元素。

您可以通过 2 种方式做到这一点。

  1. 用于calc(px +/- %)_translateY
  2. margin-top:-npx一起使用translateY(-%)

请参见下面带有选项 1 的示例

.top {
  width: 100%;
  background: red;
  height: 100px;
}

.move-me {
  transition: 0.3s ease-out;
  width: 100%;
  height: 50px;
  background: blue;
}

section:hover .move-me {
  transform: translateY(calc(-50px - 50%))
}
<section>
  <div class="top">

  </div>
  <div class="move-me">

  </div>
</section>

推荐阅读