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

Need assistance with CSS layout: How to extend a div to the bottom of the page

I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this. Initially, I enclos ...

csshtml

designing a responsive form in the mobile environment

I have implemented a search form on my website with a button inside the text box. It works fine on desktop, but when I switch to mobile view, the positioning is off. I am currently using absolute positioning for the button to give it a fixed position. Is t ...

htmlcsstwitter-bootstrap

What is the expected output format for htmlspecialchars?

When I try the following: echo (htmlspecialchars("andreá")); I expect to see So, assuming that if I do echo (htmlspecialchars_decode("andreá")); I would get andreá. However, instead of the expected result, I see Additionally, when I run echo ...

phphtmlutf-8

How can I delete the black background from the ion-tab-bar in Ionic 7?

In my current project using Ionic 7, I have a navigation guide set up with 4 tabs. I am trying to customize the styling of these ion tabs by adding some custom CSS. The issue I'm facing is that despite my attempts to make the background transparent, ...

javascriptcssangularionic-framework

Attempting to create a functional action listener for a deck of cards game

I'm currently working on a game and want to make an image appear blank when clicked on, to simulate it disappearing. Specifically, this is for a tri peaks solitaire game. I have a function that tests the validity of playing a card, but I'm strugg ...

javascripthtml

The readyState of Ajax is consistently anything but 4

I have encountered an issue with my JavaScript code. I am running these codes in order to display data based on user input. Despite there being no error connection and the connection happening properly, whenever I enter a name it always goes into the else ...

javascriptphpajaxhtml

Divide material-ui toolbar into separate left and right sections

Is there a way to split the material-ui toolbar into a left and right part? I want to display the numSelected on the left side of the toolbar, and the delete button and edit button on the right side. Currently, my output shows these buttons just beside t ...

javascripthtmlreactjsmaterial-ui

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have: <div class="parent"> I should change my color to green when clicked <div class="elem ...

jqueryhtmlcss

How can you generate a distinct id value for each element within an ngFor iteration in Angular 4?

I encountered an issue where I must assign a distinct id value to each data row within my *ngFor loop in angular 4. Here is the code snippet: <div *ngFor="let row of myDataList"> <div id="thisNeedsToBeUnique">{{ row.myValue }}</div> & ...

htmlangulartypescript

Updating div visibility based on form content in PHP

I am struggling to find a way to filter a page filled with divs based on form input to determine whether they should be displayed or not. The layout is akin to a collection of articles, where each div showcases an image and some text that links to the comp ...

phpjqueryhtmlcss

Exploring the asynchronous for loop functionality in the express.js framework

I'm attempting to use a for loop to display all images. I have stored the paths of the images in an array called Cubeimage. However, when trying to display them using <img>, I encountered an error. How can I write asynchronous code to make it wo ...

javascripthtmlexpressweb

Stop the sudden jump when following a hashed link using jQuery

Below is the code snippet I am working with: $( document ).ready(function() { $( '.prevent-default' ).click(function( event ) { event.preventDefault(); }); }); To prevent the window from jumping when a hashed anchor ...

javascriptjqueryhtmlcss

Tips for adjusting the initial scale to ensure your mobile website fits perfectly on the screen

I'm trying to figure out the best way to adjust the 'initial-scale' so that my website's width fits perfectly on any device screen when first loaded. Check out my website here: While it looks fine on regular browsers, I had some issue ...

htmlcssmobileviewport

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

css

What is the best way to incorporate a splatter image within an MDX blog post?

I am working on an MDX blog where I render a blog post. pages/index.tsx <main className="flex min-h-screen dark:bg-black"> <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64 ...

cssreactjsnext.jscss-positionmdxjs

How can you customize gutter widths for specific rows in Bootstrap 3?

Currently, I am constructing my own website using Bootstrap 3 and have come across a challenge that I would like to address: My goal is to assign distinctive gutter widths to certain rows in my design. The remaining sections of the site will adhere to th ...

htmlcsstwitter-bootstraprowtwitter-bootstrap-3

Is it possible to substitute the input field in the filter component with a Material UI text field instead?

I am attempting to replace the input field for filter components with a text field from materialUI. Despite successfully displaying the input field by creating a new component, it is not filtering contents as desired. My goal is simply to replace the inpu ...

cssreactjsmaterial-uigriddle

Position a grid item in the center

Can someone help me with centering my container's item? I am struggling to align the third item to the center using display: grid. Previously, I attempted to use flexbox but found it to be less effective for a responsive layout. .projetos { f ...

htmlcsscss-grid

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Ad ...

cssreactjssassflexbox

Issue with .submit() not submitting form after setTimeout timer runs out

How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...

javascriptjqueryhtml