从边界外部的绝对定位 [英] Absolute positioning from border exterior

问题描述

当我将一个元素绝对定位在相对元素内部时，将从容器的边缘计算坐标，而不考虑边框（相当于从边框内侧进行定位）。

有没有任何方法定位元素，但从边框的外侧？

例如：一个红色正方形（如第一个）没有边框，文本粘在容器的左上角，因为它有 top：0; left：0 。但是第二个正方形中的文本仍然具有 top：0; left：0 ，但是边框推动了正方形内的文本：

  .box {position：relative; width：150px; height：150px;背景：红色; box-sizing：border-box; margin：10px; float：left;}。box-bordered {border：25px solid rgba（0,0,0,0.1）;}。 top：0; left：0; color：white;}  

 < div class = > < 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;背景：红色; box-sizing：border-box; margin：10px; float：left;}。box-shadow {box-shadow：inset 0 0 0 25px rgba（0,0,0,0.1）;}。 top：0; left：0; color：white;}  

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

解决方案（

但是我想知道它是否可以保留边框。

没有框阴影，但不是很边界。这个怎么样？

  .box {position：relative; width：150px; height：150px;背景：红色; box-sizing：border-box; margin：10px; float：left;}。box：before {content：; border：25px solid rgba（0,0,0,0.1）;高度：100％; z-index：1; position：absolute; box-sizing：border-box; width：100％;}。text {position：absolute; top：0; left：0;颜色：白色; z-index：2;}  

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

或box-bordered：after如果你想把类保存在div元素上

When I absolute-position an element inside a relative element, the coordinates are calculated from the edges of the container without taking into account the borders (what would be equivalent to positioning from the interior side of the border.)

Is there any way of positioning the element but from the exterior side of the border?

For example: if I have a red square (like the first one) without a border, the text sticks to the top left of the container because it has top:0; left:0. But the text in the second square still has top:0;left:0, but the border pushes the text inside the square:

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

What I would like for it is for the text to keep sticking to the top left corner of the colored area. Is that possible? How could it be done?

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.

解决方案

No box shadow but not quite border either. How about this?

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

or box-bordered:after if you want to keep the class on the div element

这篇关于从边界外部的绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！