html - 边界外部的绝对定位

Question

当我将一个元素绝对定位在一个相对元素内时，坐标是从容器的边缘计算出来的，而不考虑边界(这等同于从边界的内侧定位。)

除了从边框的外侧定位元素之外，还有其他方法吗？

例如:如果我有一个没有边框的红色方 block (如第一个)，文本会粘在容器的左上角，因为它有 top:0;左:0。但是第二个方 block 中的文本仍然有 top:0;left:0，但边框将文本插入方 block 内:

.box {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.box-bordered {
  border:25px solid rgba(0,0,0,0.1);
}

.text {
  position:absolute;
  top:0;
  left:0;
  color:white;
}

<div class="box">
  <div class="text">Text</div>
</div>

<div class="box box-bordered">
  <div class="text">Text</div>
</div>

我想要的是文本保持在彩色区域的左上角。那可能吗？怎么做到的？

Note: This is more of a theory question out of curiosity; I know there are alternatives that will work (at least visually) like using negative margins, negative positioning values or an inset box-shadow:

.box {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.box-shadow {
  box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
}

.text {
  position:absolute;
  top:0;
  left:0;
  color:white;
}

<div class="box box-shadow">
  <div class="text">Text</div>
</div>

but what I would like to know if it it's possible doing while keeping the borders.

Answer 1

没有框阴影但也没有边框。这个怎么样？

.box {
  position:relative;
  width:150px;
  height:150px;
  background:red;
  box-sizing:border-box;
  margin:10px;
  float:left;
}

.box:before {
  content:" ";
  border:25px solid rgba(0,0,0,0.1);
  height:100%;
  z-index:1;
  position:absolute;
  box-sizing:border-box;
  width:100%;
}

.text {
  position:absolute;
  top:0;
  left:0;
  color:white;
  z-index:2;
}

<div class="box">
  <div class="text">Text</div>
</div>

或者 box-bordered:after 如果你想把类保留在 div 元素上