如何在css中限制父元素内的子元素？答案

【问题标题】：how to restrict the children element inside the parent element in css?如何在css中限制父元素内的子元素？
【发布时间】：2016-06-29 20:40:46
【问题描述】：

我的 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% 填充，子元素大于父元素。

我的意思是类进度条进度大于进度条容器。如何在进度条包含框内进行限制？

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

【问题讨论】：

标签： html css

【解决方案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>

直到position:relative没有父元素时，子元素的高度宽度是根据整个身体这就是为什么在父元素中使用position:relative后子元素大于父元素，子元素的高度宽度是根据父div .

【讨论】：

【解决方案2】：

您需要做的就是在.progressbar-progress 类relative 中担任职位

.progressbar-progress{
    position:relative;
}

【讨论】：

【解决方案3】：

您忘记将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>

【讨论】：