CSS网格，在CSS网格项中绝对定位一个元素：IMPOSSIBLE [英] CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE

问题描述

我有这种情况： https://jsfiddle.net/rozkvsdh/5/

一个CSS Grid，简单地说，但是在一些项目中，我需要放一个功能区或另一个div。

这是不可能的！

我该怎么办？

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

.ribbon-wrapper {
width：85px; //长度不应该在px我想！
height：88px; //长度不应该在px我想！
overflow：hidden;
// position：absolute;它不工作！
position：relative;
top：-3px;
left：-3px;
.ribbon {
font：bold 15px sans-serif;
颜色：＃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;
剩下：-30px;
width：120px;
背景颜色：＃ebb134;
颜色：#fff;


$ / code $




解决方案

可以使用伪和数据属性： / b>



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



溢出可以使用和 background-clip 可以帮助模仿色带站在外面

background-clip CSS属性指定元素的背景（无论是颜色还是图像）在其边界之下延伸。

vmin 或 vmax 设置字体大小来调整功能区的大小，以填充和协调。



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

最终， shadow 可以被添加，并且线性渐变可以帮助绘制倾斜的阴影部分。演示：
$ b

body {display：grid; grid-template-columns：repeat（auto-fit，minmax（150px，1fr））; grid-auto-rows：1fr; grid-gap：2px;身高：100vh;填充：5px;保证金：0; box-sizing：border-box;} grid-item {background-color：lightgreen; background-clip：content-box;显示：flex; justify-content：center; align-items：center;位置：相对;溢出：隐藏; padding：3px;} grid-item [data-class =new]：before {content：attr（data-class）;位置：绝对; font-size：2vmax; / *更新字体大小* /顶部：0.4em;左：-1.3em;填充：0em 1.5em;转换：旋转（315度）;背景色：金;线性渐变（135deg，黑色0.9em，透明1.15em），线性渐变（-135deg，黑色0.9em，透明1.15em）; box-shadow：0 0 3px;}

< grid -Item>见< /网格项><网格项>全< /网格项><网格项>页面< /网格项><网格项>下面< /网格项>< ; grid-item data-class =new> RESIZE< / grid-item>< grid-item> window< / grid-item>< grid-item>项目>参见< / grid-item>< grid-item> ribbon< / grid-item>< grid-item data-class =new> font& size< / grid-item>< grid-item> < grid-item>< grid-item>< grid-item> F< / grid-item>< grid-item data-class =new> /网格项><网格项>℃下/网格项><网格项> d< /网格项><网格项> E< /网格项><网格项> F< /网格项><网格项>一种与LT; /网格项><网格项> B< /网格项>

I have this situation: https://jsfiddle.net/rozkvsdh/5/

A CSS Grid, simply, but in some items, I need to put a ribbon or another div.

It's impossible!

How can I do?

 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;
  }
}

解决方案

you could use a pseudo and a data attribute :

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM

overflow can be used and background-clip can help to mimic ribbon standing a bit outside

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

vmin or vmax units could be used to set font-size to resize the ribbon via em on padding and coordonates.

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

eventually, shadow can be added and linear-gradient can help to draw slanted shadow's parts.

Demo:

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 2px;
  height: 100vh;
  padding: 5px;
  margin: 0;
  box-sizing: border-box;
}

grid-item {
  background-color: lightgreen;
  background-clip: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 3px;
}

grid-item[data-class="new"]:before {
  content: attr(data-class);
  position: absolute;
  font-size: 2vmax; /* update font-size */
  top: 0.4em;
  left: -1.3em;
  padding: 0em 1.5em;
  transform: rotate(315deg);
  background-color:gold;
  /* eventually add some shadow effects */
  background-image: 
  linear-gradient(135deg, black 0.9em, transparent 1.15em), 
  linear-gradient(-135deg, black 0.9em, transparent 1.15em);
  box-shadow: 0 0 3px;
}

<grid-item>see</grid-item>
<grid-item>full</grid-item>
<grid-item>page</grid-item>
<grid-item>then</grid-item>
<grid-item data-class="new">RESIZE</grid-item>
<grid-item>window</grid-item>
<grid-item>to</grid-item>
<grid-item>see</grid-item>
<grid-item>ribbon</grid-item>
<grid-item data-class="new">font&size</grid-item>
<grid-item>updates</grid-item>
<grid-item>F</grid-item>
<grid-item data-class="new">PRO</grid-item>
<grid-item>B</grid-item>
<grid-item>C</grid-item>
<grid-item>D</grid-item>
<grid-item>E</grid-item>
<grid-item>F</grid-item>
<grid-item>A</grid-item>
<grid-item>B</grid-item>

这篇关于CSS网格，在CSS网格项中绝对定位一个元素：IMPOSSIBLE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！