Question

我正在使用translateY()将元素向上拉以使其上方的元素重叠。

.element {
  transform: translateY(-50%);
}

它在底部留有空间。有什么办法可以拉低它下面的任何元素？

https://codepen.io/anon/pen/OBYRMe

在示例中，您可以看到它与顶部的元素重叠，这是我想要的，但在底部留有空间。我试图在不修改其他元素的情况下实现这一目标（例如，对底部的元素也使用transform）

注意：使用margin -50％无效，因为它不会使元素相对于元素高度增加50％。据我所知，只有变换才能计算出高度。

Answer 1

您可以使用以下css在底部的元素上应用变换。希望这就是您要寻找的

.element ~ div {
    transform: translateY(-50%);
}

Answer 2

您可以在margin-bottom中使用负的大值来拉出其他元素：

body {
  text-align: center;
}
.test, .element {
  width: 80%;
  padding: 60px 0;
  background: green;
  display: inline-block;
}
.element {
  width: 30%;
  background: yellow;
  display: inline-block;
  transform: translateY(-50%);
  margin-bottom:-100vh;
}

<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>
<br><br>
<div class="test"></div>

Answer 3

改为使用margin-top: -50%;。编码愉快

Answer 4

您可以使用box-shadow属性来解决您的问题，否则您可以使用flex-box或position等。无论如何，我给出了解决方案，但我不确定您是否需要此东西：）

body {
  text-align: center;
}
.test, .element {
  width: 80%;
  padding: 60px 0;
  background: green;
  display: inline-block;
}
.element {
  width: 30%;
  background: yellow;
  display: inline-block;
  transform: translateY(-50%);
  box-shadow:0px 100px yellow; 
}

<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>

CSS转换，推/拉周围的元素

4 个答案: