我怎样才能在下一行显示一个绝对的 flexbox 项目？
How can I display an absolute flexbox item in the next line?
我使用 Wordpress CMS 并像小部件一样显示我的文章。这些小部件使用 class main 包装，它具有 display:flex 属性。
在每个小部件启动之前，我有一个 div-容器，其中 class 标志为 position: absolute;。这应该在小部件的左上角开始显示一个标志。
但由于标志设置为绝对，标志显示在上一个小部件框的末尾，而不会出现在下一行。
第一条评论是对的。您需要做一些事情。是的，旗帜需要绝对定位，但相对于什么？旗帜所属的文章。所以这里是：
- 将每个标志放在它所属的
<article> div 中。
- 将
<article> 设置为 position: relative;
- 使用 CSS 位置属性定位标志：
top: 0; 和 left: -3px; 偏移文章的边框。
在此处查看更新后的 fiddle：http://jsfiddle.net/n2ft97nw/7/
我使用 Wordpress CMS 并像小部件一样显示我的文章。这些小部件使用 class main 包装，它具有 display:flex 属性。
在每个小部件启动之前，我有一个 div-容器，其中 class 标志为 position: absolute;。这应该在小部件的左上角开始显示一个标志。
但由于标志设置为绝对，标志显示在上一个小部件框的末尾，而不会出现在下一行。
第一条评论是对的。您需要做一些事情。是的，旗帜需要绝对定位，但相对于什么？旗帜所属的文章。所以这里是：
- 将每个标志放在它所属的
<article>div 中。 - 将
<article>设置为position: relative; - 使用 CSS 位置属性定位标志：
top: 0;和left: -3px;偏移文章的边框。
在此处查看更新后的 fiddle：http://jsfiddle.net/n2ft97nw/7/