HTML/CSS - 块内的绝对位置，边框宽度为 100%

Question

我有一个绝对在其parent内的区块位置。 parent 有左右边框。这会导致绝对定位块（也有边框）2px 太小。

解决此问题的最佳方法是什么？

目标：我基本上希望这两个块对齐。他们的边界基本上应该看起来像 1 个边界。问题是，即使使用 border-box，child div 也较小，因此不会对齐。

html

<div class="container">
    <div class="diagonal"></div>
</div>

css

* {
  box-sizing: border-box;
}
body {
    background-color:red;
}

    .container {
        width:1170px;
        margin:0 auto;
        margin-top:200px;
        height:700px;
        position:relative;
        z-index:3;
        background-color:white;
        border-style:solid;
        border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
        border-width:0 1px 1px 1px;
    }

    .diagonal {
        width:100%;
        height:400px;
        transform:skewY(-10deg);
        position:absolute;
        top:-200px;
        left:0;
        background-color:white;
        border-style:solid;
        border-color:transparent #D2D8DE;
        border-width:0 1px;
        z-index:-1;
    }

JSFiddle

Answer 1

我想你正在寻找这个：

* {
  box-sizing: border-box;
}

这个属性tells the browser to account for any border and padding in the value you specify for width and height

编辑：

如果您想要内部和外部 div 有不同的边框并且您希望它们对齐，请设置 .diagonal{ left:-1px; } 其中 1px 是内部 div 边框的宽度。我改变了宽度和颜色，这样结果会更容易被注意到。注意：在这种情况下你不需要 box-sizing: border-box;

body {
  background-color: red;
}

.container {
  width: 1170px;
  margin: 0 auto;
  margin-top: 200px;
  height: 700px;
  position: relative;
  z-index: 3;
  background-color: white;
  border-style: solid;
  border-color: transparent black black black;
  border-width: 0 3px 3px 3px;
}

.diagonal {
  width: 100%;
  height: 400px;
  transform: skewY(-10deg);
  position: absolute;
  top: -200px;
  left: -3px;
  background-color: white;
  border-style: solid;
  border-color: transparent blue;
  border-width: 0 3px;
  z-index: -1;
}

<div class="container">
  <div class="diagonal"></div>
</div>

HTML/CSS - 块内的绝对位置，边框宽度为 100%

HTML/CSS - position asolute within block with border 100% width

html

css

css-position

width