CSS：位置绝对改变div宽度

Question

我在网站的一部分中具有以下div结构。有两个div，一个下面另一个。第一个div分为两个元素。一格（ 63％）和一个按钮。

在此之下，还有另一个div，其div的宽度和位置与绝对值相同 63％。

将位置设为绝对值不会导致两个div具有相同的宽度和相同的大小。

一部分CSS代码

#two{
  border: 1px solid;
  width: 63%;
  position: absolute; //Enabling this resulting in varying size even width  is same
}

这是我的密码笔链接https://codepen.io/JGSpark/pen/bZyvEV?editors=1100

我希望有两个与绝对位置相同大小的div。有什么可以在这里尝试的吗？

Answer 1

添加position: absolute 相对于任何元素时，其位置都相对于根元素。

63％的textValue是#one元素的63％，而#two的63％是文档的63％，其中包括默认的body边距< / em>。因此，将其重置为零：

body {
  margin: 0; /* added */
}

#template {
  width: 30%;
}

#textValue {
  border: 1px solid red;
  width: 63%;
  float: left;
}

#icon {
  width: 5%;
}

#text {
  width: 95%;
  float: left;
}

#one {
  width: 100%;
}

#two {
  border: 1px solid;
  width: 63%;
  position: absolute;
}

<div id="one" class="row">
  <div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
  <button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>

或者您可以为具有position: relative的元素添加包装器-参见下面的演示

.wrapper {
  position: relative; /* added */
}

#template {
  width: 30%;
}

#textValue {
  border: 1px solid red;
  width: 63%;
  float: left;
}

#icon {
  width: 5%;
}

#text {
  width: 95%;
  float: left;
}

#one {
  width: 100%;
}

#two {
  border: 1px solid;
  width: 63%;
  position: absolute;
}

<div class="wrapper">
  <div id="one" class="row">
    <div id="textValue"><span id="text">ONE Inner text</span><span id="icon "><i class="fa fa-angle-up "></i></span></div>
    <button id="template" class="btn primary ">Template</button>
  </div>
  <div id="two">TWO</div>
</div>

Answer 2

我们能够添加带有position：relative的父div。或只添加position：相对于body标签。

<div style="position: relative;">
<div id="one" class="row">
    <div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>    
  <button id="template" class="btn primary">Template</button>
</div>
  <div id="two">TWO</div>
</div>

Answer 3

绝对位置必须相对于某物，在这种情况下，它相对于具有默认边距和填充的文档。试试这个：

<div class="wrapper">
  <div id="one" class="row">
    <div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i 
class="fa fa-angle-up"></i></span></div>    
  <button id="template" class="btn primary">Template</button>
</div>

  <div id="two">TWO</div>
</div>

在CSS中添加：

.wrapper {
  position:relative;
}

Answer 4

在您的情况下，＃one内的#textValue为63％，即#one div的63％。 由于#two div是绝对的，而没有给出父元素的相对位置，因此它相对于body元素要比#one div大，因此 即使您指定了相同的宽度，您仍然可以看到差异。