What is the best way to confine the child elements within a parent element using CSS?

Check out my CSS and HTML code here: https://jsfiddle.net/z2cc11yk/

Here's the 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>

And this is the CSS code:

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

I'm facing an issue with the absolute positioning of child elements inside the progress bar container. The child element becomes larger than the parent when it's filled to 100%. How can I constrain it within the progressbar-container?

Also, why does the height fill up even when the children element's width exceeds the parent element?

htmlcss

Answer №1

By adding position:relative to the .progressbar-container, you can ensure that the width will display correctly, while the height is specified by you. The issue arises when using position:absolute in child elements, as it requires position:relative to be applied to the parent element in order to position the children accordingly.

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

Without applying position:relative to the parent element, the child's dimensions are relative to the entire body, resulting in them exceeding the parent's size. By implementing position:relative on the parent element, the child's dimensions will align with those of the parent div.

Answer №2

To achieve the desired outcome, simply adjust the position property within the .progressbar-progress CSS class to be relative

.progressbar-progress{
    position:relative;
}

Answer №3

Remember to include position: relative in the styling of .progressbar-container. Without it, the child element's dimensions are calculated based on the body tag.

Ensure that the parent element has position: relative so that the width and height calculations are accurate.

Elements with position: absolute determine their size according to the closest ancestor node with a position of relative, absolute, or 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking on a radio button can trigger the selection of another radio button

I'm currently working on a form that includes 8 radio buttons - 4 for System A and 4 for System B. The options for the buttons are CF, ISO, ISO-B, and NW. My goal is to create a functionality where selecting a radio button in System A automatically se ...

javascripthtml

The properties of the NextFont variable cannot be utilized in the CSS global scope when using the var() function

// font.ts file import { Quicksand, Syncopate } from 'next/font/google'; export const quickSandRegular = Quicksand({ subsets: ['latin'], variable: '--font-quicksand-reg', weight: '400', display: 'swap& ...

cssvariablesnext.jstailwind-css

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

javascripthtmlhoverjquery-isotope

Vue component updating its model only upon input element losing focus

I'm a beginner with vue and I'm currently working on incorporating an ajax search feature that triggers when a keyup event occurs. I have noticed that the model only updates when the input element loses focus. Sample HTML Code: <input name=" ...

javascripthtmlvue.js

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

I have encountered some difficulty in stopping a crossfade animation on the last nth-child element. Although I am aware of using animation-fill-mode: forwards, implementing it in different places such as in the initial .crossfade declaration did not yield ...

htmlcssanimation

Display the Image Element in Angular only when the image actually exists

In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...

javascripthtmlangularjsimage

The background only partially covers the section

In a current project test using the provided template from , I encountered an issue when changing the section <section role="main" id="main"> to incorporate the carbon class as the background does not fill completely. My attempts to adjust the secti ...

htmlcss

Issue with style display:none not functioning in IE8, IE9, and IE10 when in Compatibility View mode

I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...

javascriptjqueryhtml

Tips for verifying user input prior to taking action

I am fairly new to internet languages and I am trying to understand how to validate user input before calling a method, but I have not been successful so far. <html> <head> </head> <body> <?php $gr ...

phphtmlformspost

Tips for changing the <title> in an AngularJS one-page application

I am working on a single-page AngularJS application. The index.html file is structured as follows: <html ng-app="myApp" ng-controller="MyCtrl as myctrl"> <head> <link rel="stylesheet" href="my-style-sheet.css"> <title>{{ ...

javascripthtmlangularjsangularjs-controller

Concealing the submit button until a file has been selected

How can I make the submit button invisible until a file is selected? <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="imageURL[]" id="imageURL" /> <input type="submit" value="submi ...

javascriptjqueryhtmlcss

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing ...

javascriptjqueryhtmlcss

Link clicking causing webpage navigation issues

My web page features a table of contents, but unfortunately the page navigation is not functioning properly. Below is the HTML code: <a name="top_of_page">Create Account</a> <a href="#top_of_page">top</a> Even when I click on the ...

htmlnavigation

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

htmlcss

Support for Chrome in Angular 8

Can someone please advise on the minimum version of Google Chrome that is supported by Angular 8? Additionally, I am looking for a way to prompt users to update their Chrome browser if it doesn't meet the required version. My Angular application seems ...

javascripthtmlangular

JavaScript Scrolling Functionality Not Functioning as Expected

I have implemented a scroll function on my website $('#lisr').scroll( function() { if($(this).scrollTop() + $(this).innerHeight()>= $(this)[0].scrollHeight) { //Perform some action here } } However, I am encountering an ...

javascriptjqueryhtmlajaxdom

Ways to design siblings that are not currently being hovered over

Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...

htmlcss

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

I'm currently working on a project using vuetify, and I am facing an issue while trying to add a custom class to a v-dialog component. I have tried searching for information on how to do this, but it seems that the prop "content-class" has been deprec ...

cssvue.jssassvuetify.js

Using regex for 'OR' conditions in regular expressions

I have been grappling with this issue for quite some time now. Can you offer any helpful hints or suggestions? When it comes to Outlook emails, we often see forwarded emails containing information within the email body like so: From: Jackson, Peter Sent: ...

html.netregexemail

Turn off the ability for items in Isotope to be set to an absolute

Currently, I am customizing my portfolio and looking to implement my own method for positioning the portfolio items. The Isotope library typically uses absolute positioning with left and top properties to position portfolio elements. Even after trying to o ...

htmlcssjquery-isotope