The child div disregarding the usage of Bottom and Top based on its parent div

Question

The child div disregarding the usage of Bottom and Top based on its parent div

Take a look at this code snippet on jsfiddle: https://jsfiddle.net/mcgfhL10/

#description{ /*A brief description of the product. */
    font-family:"microsoft sans serif";
    font-size:22px;
    position:relative;
    overflow-y:scroll;
    bottom:40px;
    width:400px;
    height:150px;
    background:black;
}

I want the div with id description to be positioned at the bottom of the div with id shelf. However, it currently aligns itself at the bottom of the image instead. Why is this happening since they are siblings?

html css

Answer 1

Answer №1

Your code is experiencing an issue because the description is positioned relatively while the parent has no positioning set at all. This causes the description to calculate its position relative to the closest element (the image) instead of recognizing that it belongs inside the shelf. To resolve this, you need to make the child absolute and the parent relative. If you simply position a child element relative and then set its bottom to 0px, it will not stay in place. By setting the child to be absolute, you are essentially telling it not to move from its current position. Here's a helpful demo for reference: jsFiddle Demo

.shelf {
    position: relative;
}
.description {
    position: absolute;
}

I recommend taking some time to learn more about CSS positioning and display before proceeding further. Understanding these fundamentals will greatly benefit your development skills.
CSS Tricks
A List Apart

Answer 2

Your code is experiencing an issue because the description is positioned relatively while the parent has no positioning set at all. This causes the description to calculate its position relative to the closest element (the image) instead of recognizing that it belongs inside the shelf. To resolve this, you need to make the child absolute and the parent relative. If you simply position a child element relative and then set its bottom to 0px, it will not stay in place. By setting the child to be absolute, you are essentially telling it not to move from its current position. Here's a helpful demo for reference: jsFiddle Demo

.shelf {
    position: relative;
}
.description {
    position: absolute;
}

I recommend taking some time to learn more about CSS positioning and display before proceeding further. Understanding these fundamentals will greatly benefit your development skills.
CSS Tricks
A List Apart

Answer 3

Answer №2

In order for your description to be properly positioned, it should have a CSS property of absolute positioning within the parent container, rather than being relative to other elements. Additionally, make sure to place your description div above the image in the HTML structure.

Your updated HTML code should look like this:

<div id="description"><p>foobar</p></div>
<img id="image" src = "image.jpg">

And don't forget to add the following CSS:

#description{
  position: absolute;
}

You can view an example on JSFiddle here: https://jsfiddle.net/jgghpcmy/1/

Answer 4

In order for your description to be properly positioned, it should have a CSS property of absolute positioning within the parent container, rather than being relative to other elements. Additionally, make sure to place your description div above the image in the HTML structure.

Your updated HTML code should look like this:

<div id="description"><p>foobar</p></div>
<img id="image" src = "image.jpg">

And don't forget to add the following CSS:

#description{
  position: absolute;
}

You can view an example on JSFiddle here: https://jsfiddle.net/jgghpcmy/1/

The child div disregarding the usage of Bottom and Top based on its parent div

Answer №1

Answer №2

Similar questions

Adjusting position in relation to the cursor's movements

Mastering the art of gracefully transitioning to a fallback option when CSS grid

Interactive game created using JavaScript input

Displaying pictures under specific conditions

What is the purpose of using "javascript:function()" in the href attribute of an anchor tag to invoke a JavaScript function?

Conceal a list of items within a div that has a particular class

Ways to incorporate a while loop into a randomizing function

What strategies can be implemented to avoid the delay in loading background content on a website?

Enhancing server-generated content with AngularJS

How can I use jQuery to reload the page only at certain intervals?

I want to adjust the size of a <div> element as an image is being resized using Bootstrap's "img-responsive" class

Create a CSS design that features a top border tip

Is it possible to dynamically convert percentages to pixels in real-time?

Incorporating HTML coding into SharePoint Online

Exploring the functionalities of jQuery and Local Storage: Understanding the Selector's various states

JQuery .hover triggering unexpectedly without actually hovering

"Using jQuery to trigger a click function on elements with the same

distinguish different designs for individual components in Angular 5

What is the method for encoding and decoding a query string within an HTML object tag?

Varying heights based on the screen size