Achieving True Nested Divs: Making Children Truly Inside

I want to create nested divs for positioning children with top and left properties, allowing them to overlap each other:

https://jsfiddle.net/e0cpuarv/

      .boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }
      
      .kah1 {
        position: absolute;
        left: 20px;
        top: 30px;
        width: 50px;
        height: 50px;
        background-color: green;
      }
      
      .kah2 {
        position: absolute;
        left: 30px;
        top: 40px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }
  <body>

    <div class="boo">
      <div class="kah1"></div>
      <div class="kah2"></div>
    </div>

  </body>

I have managed to position the elements, but the children are just overlapping on top of the parent. Any suggestions on how to make them stay inside the parent container as shown in this image:

desiredresult

In addition, I am open to using IMG tags instead of DIVs if that makes it easier.

htmlcss

Answer №1

Give this a shot:

 body{margin:0px;padding:0px;}   
     .boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }

      .kah1 {
        position: absolute;
        left: 20px;
        top: 30px;
        width: 50px;
        height: 40px;
        background-color: green;
      }

      .kah2 {
        position: absolute;
        left: 30px;
        top: 40px;
        width: 50px;
        height: 30px;
        background-color: blue;
      }

Check out the demo here

Answer №2

Modify this:

.boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
      }

to this:

.boo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 100px;
        height: 70px;
        background-color: red;
        overflow: hidden;
      }

Check out the JSFiddle demonstration here

Essentially, you just need to include overflow:hidden in the parent element .boo :)

Answer №3

Simply adjust the main div (.boo) to have a relative position.

Review the code and modify the left and top values for kah1 and kah2 to position the inner boxes accordingly.

.boo {
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    width: 100px;
    height: 70px;
    background-color: red;
}
      
.kah1 {
    position: absolute;
    left: 25px;
    top: 12px;
    width: 50px;
    height: 50px;
    background-color: green;
}
      
.kah2 {
    position: absolute;
    right: 25px;
    top: 12px;
    width: 50px;
    height: 50px;
    background-color: blue;
}
<body>

<div class="boo">
    <div class="kah1"></div>
    <div class="kah2"></div>
</div>

</body>

Answer №4

To conceal the overflow, you can use overflow: hidden. In this scenario, your CSS code would look like this:

.boo {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 100px;
  height: 70px;
  background-color: red;
  overflow: hidden;
}

.kah1 {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 50px;
  height: 50px;
  background-color: green;
}

.kah2 {
  position: absolute;
  left: 30px;
  top: 40px;
  width: 50px;
  height: 50px;
  background-color: blue;
}
<body>

  <div class="boo">
    <div class="kah1"></div>
    <div class="kah2"></div>
  </div>

</body>

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

The line spacing is not functioning as expected

I'm looking to vertically align my text with my logo in a seamless manner. However, whenever I adjust the line height, it affects the positioning of my logo as well. Is there a way to only modify the text position while keeping the logo centered? Chec ...

htmlcss

Tips for preventing Razor from interpreting special characters as HTML code

I'm encountering an issue with special characters displaying as HTML codes on the page I'm working on. The content is retrieved from a database and shown in readonly input boxes. For example, & is displayed as &. How can I ensure that the ...

htmlasp.net-mvcrazor

Transitioning between carousel slides will reveal a clean white backdrop

I'm currently facing an issue with my html website. It seems that when I navigate through the carousel slides on my Bootstrap-5 based site, white spaces keep popping up. How can I resolve this issue? Here is a snippet of my code: HTML <!doctype h ...

htmljquerycssbootstrap-5

Focus on styling a single theader element within a jQuery Data Table with CSS

Struggling to work with a dynamic Jquery Data Table that has 10 table headers. I am having difficulty adding a class or an Id in the code to the specific th element with the title 'Unused'. In my .css file, I attempted: [title~= Unused] { ba ...

jquerycssdatatablecss-selectors

Ensure that every closing curly brace is followed by a new line character

I'm utilizing a piece of code I stumbled upon online to condense my css files and it's working well, but there's a slight regex problem that's causing me some difficulty. $css = preg_replace('/([\\w#\\.\&b ...

phpcssregexnewlinecurly-braces

Creating an HTML Canvas using an AngularJS template

I am facing an issue with rendering html elements on a canvas using html2canvas JS. I am utilizing AngularJS for data binding on the html page, but unfortunately, the dynamic data is not showing up on the canvas generated from these html elements. For inst ...

javascripthtmlangularjscanvas

Unable to Toggle the 'Checked' Prop on Selection with React Bootstrap CheckBox

As a newcomer to React Bootstrap, I've been encountering an irritating problem with checkboxes in a form I'm developing. After updating the state, the checkboxes don't remain checked when selected. However, if I check them again, they stay ...

htmlreactjsreact-bootstrap

Is it possible for a table data cell to be nested within another table

Is it possible for a <td> to be a direct child of another <td>? For example: <td class="parent"> <td class="child"> <!-- Some content --> </td> </td> Or is it necessary to always create a new < ...

htmlhtml-tablew3cw3c-validation

Limiting the number of characters in PHP/MySQL

Here is a glimpse into the scenario I am currently facing: The content, including the heading, text, and image, is all dynamically generated based on user input. Users have the option to include an image and choose the text for both the heading and main c ...

phpmysqlcssdynamiclimit

What is the reason for min-content not being compatible with auto-fill or auto-fit?

My confusion lies in the fact that this code snippet works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } Whereas this one does not: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I am ...

csscss-gridfluid-layoutcss-multicolumn-layout

It can be challenging to manage numerous if-else conditions in JQuery

I am having trouble with my JQuery code that checks multiple conditions. No matter what I enter, it always goes to the else condition. $(function() { $('#installment').on("keydown keyup", check); function check() { var inst = Number($( ...

javascriptjqueryhtmlif-statement

Choose a Different Value for Another HTML Element's Class

Is there a way to preselect an option on another page before it loads? Consider two pages, A and B. If a user clicks a button on page A, I want the default option on page B to be changed to "something" before redirecting them. How can this be achieved s ...

javascriptjqueryhtmlcss

What is the process for incorporating a side group input with Bootstrap?

description of image here I am looking to add 4 small input boxes next to the third input box. Please refer to the image I have attached for reference. In the image, I have included 4 boxes. I am specifically looking for a similar layout. ...

htmlcssbootstrap-4

Could we customize the appearance of the saved input field data dropdown?

I'm currently working on styling a form that includes an input field. The challenge I'm facing is that the input field needs to be completely transparent. Everything works fine with the input field until I start typing, which triggers the browser ...

htmlcssforms

Match precisely with a specific constituent of the adjacent cell

Is there a way to accomplish this layout using tables? I'm open to suggestions, such as utilizing flexbox, if it's not possible with tables. In a table with two columns, the left column contains text while the right column holds an image and add ...

htmlcsshtml-tablealignment

Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary. My p ...

htmlcsscustomizationmozillahtml-select

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

I recently realized that I used underscores instead of hyphens in some of my CSS class and id names. To correct this, I want to replace all underscores with hyphens using the sublime text replace feature (ctrl + H). Is there a way to change underscores to ...

htmlcsssublimetext3

Attempting to input data into elements that have been generated automatically

Trying to set values to elements with automatically generated id's: This code is functional: <input type="tekst" id="<?php echo $item->getId();?>"> <script> document.getElementById("<?php echo $item->getId();?>").v ...

javascriptphphtmlmysqldatabase

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

I have been attempting to personalize my Stratus 2 Beta by implementing a custom theme. I created a separate CSS file named "stratus.css" and stored it in the CSS directory of my website - with the CSS code being identical to this example. Below is my Jav ...

javascripthtmlcssthemessoundcloud-stratus

"Skip the inbox clutter and access the compose page directly on Gmail, Yahoo, and

I was looking to create a unique hyperlink that would direct users to a compose page similar to Google Mail. Here is an example of what I tried: <li><a href="https://inbox.google.com/mail/?view=cm&fs=1&<a href="/cdn-cgi/l/email-protect ...

htmlemailhyperlink