javascript - 如何将 float flex div 放置在 flex 背景上并确保 div 保持在该位置？

Question

我知道这不是一个非常具体的问题，但我真的很喜欢想法。

澄清一下， float 的 div 和背景都会随着窗口大小而拉伸(stretch)，但 div 必须保持在背景顶部的“相同”位置。

这样的事情有可能吗？

这是一个 jsFiddle:http://jsfiddle.net/778fb958/3/

<div class='background'>    
    <div class='foreground'>
        <img class='tinyguy' src="http://orig05.deviantart.net/2f16/f/2012/027/8/9/16_bit_mario_by_nathanmarino-d4ntfl6.png">
    </div>    
</div>

Answer 1

使用百分比。

你可以用位置来做到这一点。

这是 an example position: absolute; top 和 left 设置为 20%。

这是 an example没有位置，但 margin-top 和 margin-left 设置为 20%

注意后台如何使用这个...

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

... 填满整个屏幕