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 using position:relative in parent element the child's height width is according to parent div.


    CSS Howto..

    R rmarkdown ioslides - How to include a segue slide?

    CSS Button Animation - How to Accomplish?

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    How to Flip Div's in Randomly

    How to Triger a css animation for a y element from a a trigger x

    How to draw a dotted line with css?

    How to change css by using tag or class name in typescript?

    How do I get my textboxes to align properly once triggered? - jQuery/CSS

    how can I make my image (down arrow) disappear when I start scrolling my page?

    How can I use CSS to select the “a” tag in the following layout?

    jQuery/HTML Select: Show more text in selected option when select is closed

    How to customize bootstrap css when using bootstrap-sass [closed]

    How to create opacity effect on webOS?

    Showing horizontal-scrollbar while setting width: 100%

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    Any idea how to add this sinking hover effect to an image/link?

    How to make this styling with css

    How to style just one type of input field without also affecting other input types with CSS

    How to Get Multiple elements to change color on hover CSS?

    How change color of text and image before print with css? [closed]

    How to override a display:none property applied to parent element in specific child elements

    How to set animation in css?

    How to deal with collapsing margins on html & body?

    How can I make a div with “position:fixed” to stay out of the screen if the window overflows?

    How to change nav text color when scrolled over other div anchors in the page

    How to vertically align and stretch content using CSS flexbox

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    How to handle mouseover properly on a flipped div?

    How to abruptly stop a linear animated jQueryUI slider handle (crossbrowser)

    How can I make html table columns (only the ones with text) evenly spaced