Javascript Flexbox图像库和单个图像位置

从这个图像库，我想保持右上角的图像位置始终不变，我试图修复，但我不能

这是图片库的参考资料

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial；
}
img{
位置：相对位置；
溢出：隐藏；
排名：0；
左：0；
不透明度：1；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：全部。4s易入易出；
过渡：全部。4s轻松进出；
}
.行{
显示：-ms flexbox；
/*IE10*/
显示器：flex；
-ms-flex-wrap:wrap；
/*IE10*/
柔性包装：包装；
填充：0 20px；
}
.栏目{
-ms-flex:25%；
/*IE10*/
弹性：25%；
最大宽度：25%；
填充：10px；
}
.img列{
边缘顶部：20px；
垂直对齐：中间对齐；
}
#覆盖：悬停{
溢出：隐藏；
排名：0；
左：0；
不透明度：0.7；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：全部。4s易入易出；
过渡：全部。4s轻松进出；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.栏目{
-ms-flex:50%；
弹性：50%；
最大宽度：50%；
}
}
/*响应式布局-使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
-ms-flex:100%；
弹性：100%；
最大宽度：100%；
}
}

*{
框大小：边框框；
}
身体{
保证金：0；
字体系列：Arial；
}
img{
位置：相对位置；
溢出：隐藏；
排名：0；
左：0；
不透明度：1；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：全部。4s易入易出；
过渡：全部。4s轻松进出；
}
.行{
显示：-ms flexbox；
/*IE10*/
显示器：flex；
-ms-flex-wrap:wrap；
/*IE10*/
柔性包装：包装；
填充：0 20px；
}
.栏目{
-ms-flex:33.3%；
/*IE10*/
弹性：33.3%；
最大宽度：33.3%；
填充：10px；
}
.img列{
边缘顶部：20px；
垂直对齐：中间对齐；
}
#覆盖：悬停{
溢出：隐藏；
排名：0；
左：0；
不透明度：0.7；
背景色：rgba（0,0,0,0.5）；
-webkit过渡：全部。4s易入易出；
过渡：全部。4s轻松进出；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.栏目{
-ms-flex:50%；
弹性：50%；
最大宽度：50%；
}
}
/*响应式布局-使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
-ms-flex:100%；
弹性：100%；
最大宽度：100%；
}
}

我不明白这个问题，你说的“我想让右上方的图像位置始终保持不变”是什么意思？它总是在顶部…如果你看排行榜总是一样的位置，我想保持任何一张图片总是一样的位置！这将是类似的布局和位置将右上角排行榜/摄影师图片我已经审查了该网站。他们没有保持固定，只是我们使用了

flex:25%

，而他们使用了

flex:33.3%

。还检查了反应性，它正在下降。保持不变，更新代码。请复习，不！我只想在每个响应性版面中的右上角保留一个图像！你不想堆叠你的布局？你能准确描述一下你需要什么吗？你想要两列小型设备？或者您希望右上角有一个图像作为侧边栏