从边界外部绝对定位答案

【问题标题】：Absolute positioning from border exterior从边界外部绝对定位
【发布时间】：2017-03-03 21:14:41
【问题描述】：

当我在相对元素中对元素进行绝对定位时，坐标是从容器的边缘计算出来的，而不考虑边界（这相当于从边界的内侧定位。）

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

例如：如果我有一个没有边框的红色方块（如第一个），则文本会粘在容器的左上角，因为它有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>

我想要的是让文本一直粘在彩色区域的左上角。那可能吗？怎么可能？

注意：这更多是出于好奇而提出的理论问题；我知道有一些替代方法（至少在视觉上）可以使用，例如使用负边距、负定位值或插入 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>
但我想知道是否可以在保持边界的同时做。

【问题讨论】：

请记住，只有在 box-sizing: border-box; 的情况下，边框才能进入内部。属性已设置。
两种情况下都有box-sizing: border-box
如果稍微改一下 html 不打扰你，你可以看看这个jsfiddle.net/87hurwnu 或者不改html就更好了jsfiddle.net/87hurwnu/1

标签： html css

【解决方案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 元素上保留类

【讨论】：

这是一个非常简单和聪明的选择。我喜欢它

【解决方案2】：

我想到的唯一两个解决方案是：

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

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

【讨论】：

有没有不依赖边框大小的通用解决方案？

【解决方案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>

【讨论】：

这与我提供的第二个示例有何不同？除了margin: 0 之外，它看起来（并且似乎工作）相同
好吧，避免在边距和/或定位中使用负值，您不依赖于其他 html 对象，这些对象可能会被 DOM 操作修改，所以从我的角度来看，这个解决方案是最干净的.

【解决方案4】：

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

因此，如果不使用您提到的负边距或插入框，我看不到解决方案，这是对原始问题的某种修复。

【讨论】：