html - css如何限制父元素内的子元素？

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% 填充子元素比父元素大。

我的意思是类 progressbar-progress 比 progressbar-container 大。如何限制progressbar-contain box内部？

另外一个问题是为什么高度被填充，而子元素的宽度却比父元素的宽度大？

Answer 1

在 .progressbar-container 中使用 position:relative 宽度会很好，高度由你给定，唯一的问题是当你使用 position:absolute 在子元素中，您需要在父元素中使用 position:relative 来根据父元素放置子元素。

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

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

Till the time position:relative is not there is parent element the child's height width is according to whole body thats why child element is greater then parent element after using position:relative in parent element the child's height width is according to parent div.