how to restrict the children element inside the parent element in css?
Tags: html,css,css3
Problem :
my css and html code is : 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%;
}
The issue is I use the absolute position for inside element, as I need to present the text on top of the progress bar.
But I find if 100% filled the childe element is larger than the parents element.
I mean the class progressbar-progress is larger than the progressbar-container. How to restrict inside the progressbar-contain box?
Another question is why the height is filled, while the children elements width is larger than parents element?
Solution :
The width will be fine with position:relative
in .progressbar-container
and height is given by you only the problem is when you use position:absolute
in children element you need to use position:relative
in parent element to place the children element according to parent.
.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 usingposition:relative
in parent element the child's height width is according to parent div.