边框外绝对定位

Question

当我在相对元素内部绝对定位一个元素时，坐标是从容器的边缘计算的，而不考虑边框（相当于从边框内侧定位）。是否有一种方法可以从边框外部定位元素？

例如：如果我有一个没有边框的红色正方形（如第一个），文本会紧贴容器的左上角，因为它具有"top: 0; left: 0"。但是第二个正方形中的文本仍然具有"top: 0; left: 0"，但边框将文本推到了正方形内部：

.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.

- Alvaro Montoro

---

请记住，如果设置了box-sizing:border-box;属性，则边框只能放在内部。 - Dinca Adrian

在这两种情况下，它都具有 box-sizing: border-box。 - Alvaro Montoro

如果更改一下HTML不会让您感到困扰，您可以查看此链接：https://jsfiddle.net/87hurwnu/。或者更好的方法是不更改HTML：https://jsfiddle.net/87hurwnu/1/。 - Lidaranis

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 元素上保留这个类。

- Lidaranis

---

这是一个非常简单而聪明的选择。我喜欢它。 - Alvaro Montoro

Answer 2

我能想到的仅有两个解决方案是：

1. 在 .text 上设置等于边框宽度的负边距。
2. 使用负值在上和左属性上。

.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;
  margin: -25px;
}
.text2 {
  position:absolute;
  top: -25px;
  left:-25px;
  color:white;
}

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

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

- GreyRoofPigeon

---

有没有一种通用的解决方案，不依赖于边框大小？ - Alvaro Montoro

Answer 3

我不知道你是否考虑过，但是box-shadow有一个默认的边距。将其设置为0，你就可以达到期望的结果。

.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);
  margin: 0;
}

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

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

- Dez

---

这与我提供的第二个替代方案有何不同？除了 margin: 0 之外，它看起来（并且似乎也能正常工作）是相同的。 - Alvaro Montoro

避免在边距和/或定位中使用负值，这样您就不会依赖于可能被DOM操作修改的其他HTML对象，因此从我的角度来看，这种解决方案是最干净的。 - Dez

Answer 4

正如您所见，中心的100 x 100区域是文本内容的放置区域。每个内容都将根据边距、边框和填充进行计算。

因此，我认为没有不使用负边距或嵌套框的解决方案，正如您所提到的那样，这是对原始问题的某种修复。

- pratik mankar

Answer 5

这是可能的。

.parent {
 position: relative;
 border: solid 1em;
}

.child {
 --top: 0;
 --left: 0;
 position: absolute;
 box-sizing: content-box;
 width: 100%;
 height: 100%;
 border: solid 0 transparent;
 border-width: inherit;
 top: calc(50% + var(--top));
 left: calc(50% + var(--left));
 transform: translate(-50%, -50%);
 background-origin: border-box;
}

如果您的父元素周围有不同的边框宽度，则此方法可能不起作用。但大多数情况下，这种方法都可以胜任。

- Shiba