CSS网格，将绝对元素放置在CSS网格项中：不可能

我有这样的情况：

一个CSS网格，很简单，但在某些项目中，我需要放置一个功能区或另一个div

这是不可能的

我该怎么办

 grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ribbon-wrapper {
  width: 85px; // the length should be not in px I think!
  height: 88px; // the length should be not in px I think!
  overflow: hidden;
  //position: absolute; it doesn't work!
  position: relative;
  top: -3px;
  left: -3px;
  .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 120px;
    background-color: #ebb134;
    color: #fff;
  }
}

---

您需要放置

位置：相对网格项上编码>然后可以在
功能区包装器上使用绝对位置

grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ribbon-wrapper {
  width: 85px; // the length should be not in px I think!
  height: 88px; // the length should be not in px I think!
  overflow: hidden;
  position: absolute;
  top: -3px;
  left: -3px;
  .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -ms-transform:     rotate(-45deg);
    -o-transform:      rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 120px;
    background-color: #ebb134;
    color: #fff;
  }
}

功能区不会向左对齐，因为它是flex容器的流入子容器，具有
justify content:center
。因此，功能区和内容并排居中

您可以使用
右边距：auto
替代该设置，该设置将使功能区左对齐，但也将使内容右对齐

可以在容器中插入一个以创建相等的平衡，保持内容居中。但这有点牵扯，可能没有必要

坚持CSS定位属性。这将定位功能区。重新确定规模是另一回事：

grid-item {
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* establish nearest positioned ancestor for abspos containment */
}

.ribbon-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.ribbon-wrapper .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 15vw;
    background-color: #ebb134;
    color: #fff;
}

你可以这样做，也可以调整大小，但是有点乱

间隔垫在那里，所以你有高度。你需要在每一边各放一个，因为你想让PRO居中。为了实现这一点，我们在每一面牺牲了1px，现在
功能区包装器可以是绝对的


HTML

您可以使用伪密码和：

HTML5的设计考虑到了数据的可扩展性，这些数据应该与特定元素关联，但不需要有任何定义的含义。data-*属性允许我们在标准的语义HTML元素上存储额外的信息，而无需其他黑客攻击，例如非标准属性、DOM上的额外属性

可以使用溢出，并有助于模拟稍微站在外面的缎带

背景剪辑CSS属性指定元素的背景（颜色或图像）是否延伸到其边框下方

可用于设置字体大小，以通过填充和坐标上的em调整功能区大小

视口长度百分比
相对于初始包含块的大小。当初始包含块的高度或宽度更改时，它们将相应地缩放

最后，可以添加
阴影
，并且
线性渐变
可以帮助绘制倾斜阴影的部分

演示：


正文{
显示：网格；
网格模板列：重复（自动拟合，最小值（150px，1fr））；
网格自动行：1fr；
网格间距：2px；
高度：100vh；
填充物：5px；
保证金：0；
框大小：边框框；
}
网格项{
背景颜色：浅绿色；
背景剪辑：内容框；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
溢出：隐藏；
填充：3倍；
}
网格项[数据类=“新建”]：在{
内容：attr（数据类）；
位置：绝对位置；
字体大小：2vmax；/*更新字体大小*/
顶部：0.4em；
左：-1.3em；
填充：0em 1.5em；
变换：旋转（315度）；
背景颜色：金色；
/*最终添加一些阴影效果*/
背景图像：
线性梯度（135度，黑色0.9em，透明1.15em），
线性梯度（-135度，黑色0.9em，透明1.15em）；
盒影：0 3px；
}
参见
满的
页
然后
调整大小
窗口
到
看见
丝带
字体和大小
更新
F
赞成的意见
B
C
D
E
F
A.
B
您需要放置
位置：相对在
网格项上，然后您可以在
上使用绝对位置。ribbon wrapper
请在问题本身中包括a中的所有相关代码，而不仅仅是在第三方网站上。请在答案本身中包括a中的所有相关代码，而不仅仅是在第三方网站上。您的评论的打字错误是什么。css注释是
/*comment*/
我的意思是你应该建议他，而不是复制/粘贴它的注释方式；）不管怎样，我确实对你的答案投了赞成票，因为当时没有相对/绝对行为first@GCyrillus没有什么可以给他建议的，这些评论是正确的。正如您在问题中所看到的，OP具有
.ribbon wrapper{….ribbon{…}
。CSS不是这样写的，因为你不能像那样嵌套它们，让我们假设OP使用的更少，像
/…
这样的注释是有效的。我把问题格式化了一点，这样更容易看到这个谢谢@GCyrillus，漂亮的解决方案！非常感谢！太神奇了为什么
旋转（315度）
而不是
旋转（-45度）
？一个特殊的原因？为什么我只有一个大的网格项目，填充“宽度”是不够的？还有一个：如果我在网格项目上有一个
边框：1px纯黑
，我如何在边框上使用色带<代码>背景剪辑
不适合这样做，对吗？@JohnSam应该加上一点微调，你可以将两个背景相互叠加，背景值不同-clip@JohnSam315度等于360度/0减去45度。事实上没有区别：）亲爱的@GCyrillus，你能看到这个吗？
<grid-item>

    <div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>    
    <div class="spacer"></div>
    <div>PRO</div>
    <div class="spacer"></div>

</grid-item>

// this is new
.spacer {
  height: 88px;
  width: 1px;
}

grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; // added
}
.ribbon-wrapper {
  width: 85px; // the length should be not in px I think!
  height: 88px; // the length should be not in px I think!
  overflow: hidden;
  position: absolute;
  top: 0; // edited
  left: 0; // edited
}