动态大小块后如何绝对定位？

Question

我有这个块，按照 A、B、C 的顺序排列：

阻止 "A" 和 "C" position: absolute。我需要在块"A"之后显示块"C"，但是块"A"的高度可能会很大，而且我不能使用属性top。这是一个代码示例：

.wrapper {
  position: relative;
  width: 100%;
  height: 1000px;
}

.block-1 {
  position: absolute;
  left: 50%;
  width: 300px;
  height: 200px;
  background: red;
}

.block-2 {
  width: 300px;
  height: 400px;
  background: yellow;
}

.block-3 {
  position: absolute;
  left: 50%;
  width: 300px;
  height: 400px;    
  background: green;
}

https://jsfiddle.net/skriming/xn47v51k/

Answer 1

这是解决方案，但它结合了 css + jquery

我在 B 块中添加了 float left

.block-2{float: left}

和 C 块的顶部位置 jQuery

var aHeight = $(".block-1").height();
$(".block-3").css("top",aHeight);

如果您出于某种原因无法使用 jquery，请告诉我。

Answer 2

只需将您的 CSS 替换为以下一个：

.wrapper {
    position: relative;
    width: 100%;
    height: 1000px;
}

.block-1 {
    position: relative;
    left: 50%;
    width: 300px;
    height: 200px;
    background: red;
}

.block-2 {
    float:left;
    position:absolute;
    top:0;
    width: 300px;
    height: 400px;
    background: yellow;
}

.block-3 {
    position: relative;
    left: 50%;
    width: 300px;
    height: 400px;
    background: green;
}

动态大小块后如何绝对定位？

How to absolute position after dynamical size block?

html

css

css-position