Question

我的css和html代码是：https://jsfiddle.net/z2cc11yk/

HTML：

<div class="progressbar-container">
<div class="progressbar-text">125%</div>
<div class="progressbar-progress" style="background-color: red; width: 100%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>
<div class="progressbar-container">
<div class="progressbar-text">50%</div>
<div class="progressbar-progress" style="background-color: rgb(11, 211, 24); width: 50%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>

的CSS：

 .progressbar-progress{
background-color: rgb(11, 211, 24);
width: inherit;
transition: width 200ms ease 0s;
height: 100%;
position:absolute;

margin:0 10;
z-index: -2;
}
.progressbar-text{
width: 100%;
height: 100%;
position:absolute;
z-index: -1;
}
.progressbar-container{
border-style: solid;
height: 20px;
border-width:1px;
text-align:center;
width: 100%;
}

问题是我使用内部元素的绝对位置，因为我需要在进度条顶部显示文本。

但我发现如果100％填充的childe元素大于parent元素。

我的意思是班级进度条 - 进度大于进度条 - 容器。如何限制进度条包含框？

另一个问题是为什么填充高度，而子元素宽度大于父元素？

Answer 1

您忘记将position: relative添加到.progressbar-container。现在，根据width标记计算子元素的height和body。

将position: relative添加到父级，以便他们正确计算width和height。

position: absolute元素根据位置为relative，absolute或fixed的最近祖先节点计算其维度。

.progressbar-progress{
  background-color: rgb(11, 211, 24);
  width: inherit;
  transition: width 200ms ease 0s;
  height: 100%;
  position:absolute;
  max-width: 1849px;
  margin:0 10;
  z-index: -2;
}
.progressbar-text{
  width: 100%;
  height: 100%;
  position:absolute;
  z-index: -1;
}
.progressbar-container{
  border-style: solid;
  height: 20px;
  border-width:1px;
  max-width: 1849px;
  text-align:center;
  position: relative;
  width: 100%;
}

<div class="progressbar-container">
  <div class="progressbar-text">125%</div>
  <div class="progressbar-progress" style="background-color: red; width: 100%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>
<div class="progressbar-container">
  <div class="progressbar-text">50%</div>
  <div class="progressbar-progress" style="background-color: rgb(11, 211, 24); width: 50%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>

Answer 2

您需要做的就是在.progressbar-progress班relative

中排名

.progressbar-progress{
    position:relative;
}

Answer 3

position:relative中.progressbar-container的宽度可以很好，只有当您在子元素中使用position:absolute时需要使用position:relative时才会出现问题。在父元素中根据父元素放置子元素。

＆＃13;

.progressbar-progress {
  background-color: rgb(11, 211, 24);
  width: inherit;
  transition: width 200ms ease 0s;
  height: 100%;
  position: absolute;
  max-width: 1849px;
  margin: 0 10;
  z-index: -2;
}
.progressbar-text {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.progressbar-container {
  border-style: solid;
  height: 20px;
  border-width: 1px;
  max-width: 1849px;
  text-align: center;
  width: 100%;
  position:relative
}

＆＃13;

<div class="progressbar-container">
  <div class="progressbar-text">125%</div>
  <div class="progressbar-progress" style="background-color: red; width: 100%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>
<div class="progressbar-container">
  <div class="progressbar-text">50%</div>
  <div class="progressbar-progress" style="background-color: rgb(11, 211, 24); width: 50%; transition: width 200ms ease 0s; height: 20px;"></div>
</div>

＆＃13;

直到时间position:relative不存在父元素，子元素的高度宽度与整体一致，这就是为什么子元素大于父元素后使用position:relative的父元素孩子的身高是根据父母的分数。

如何在css中限制父元素内的children元素？

3 个答案: