怎样让黑色的div固定在红色的div的右上角？

Question

https://jsfiddle.net/3t4j5mfr/7/
父元素fixed不能变

Answer 1

现在的代码就是黑色方块就是在右上角,
问题出在这里,

    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;

iframe容器高度没有500px;
但是你的红色容器还是500px, 而且垂直居中.
所以显示不全而已.
垂直居中方法

Answer 2

使用position:sticky 布局试试，刚刚我把这行代码改成：

<div style="position: sticky;background:black;height:10px;width:10px;top:0;left:100%"></div>

看是不是实现了你想要的效果，我尝试了下是满足你的需求