What is the best way to place one box on top of another box?

Question

What is the best way to place one box on top of another box?

Is there a way to set the CSS position to animate a box (inside) that is within another box (outside) that is not the same height as the inner box, in order to move it from the bottom to the top?

Here is what I have been attempting with animation:

$('#box-out').hover(function(){
    $('#box-in').animate({height: '400px'},2000);
});

Currently, it expands downward on hover, but I want it to expand upward. In order to achieve this, I need to position it at the bottom of the outer box. How can I accomplish this?

Any suggestions or solutions would be appreciated. You can also check out the code here: http://jsfiddle.net/DxEMT/

jquery css

Answer 1

Answer №1

To position #box-in absolutely inside #box-out with a bottom value of 0, make sure to add position: relative to #box-out. This simple adjustment should solve the issue.

#box-out{
   width:300px; 
   height:400px; 
   border:1px solid black; 
   position: relative;
} 
#box-in{
   float:left; 
   width:300px; 
   height:100px; 
   background:red; 
   position:absolute;
   bottom:0px;
}

The rest of the code remains unchanged.

Check out a working example here: http://jsfiddle.net/DxEMT/2/

Answer 2

To position #box-in absolutely inside #box-out with a bottom value of 0, make sure to add position: relative to #box-out. This simple adjustment should solve the issue.

#box-out{
   width:300px; 
   height:400px; 
   border:1px solid black; 
   position: relative;
} 
#box-in{
   float:left; 
   width:300px; 
   height:100px; 
   background:red; 
   position:absolute;
   bottom:0px;
}

The rest of the code remains unchanged.

Check out a working example here: http://jsfiddle.net/DxEMT/2/

Answer 3

Answer №2

Give this a shot

#container{
    width:500px; 
    height:600px; 
    border:2px solid blue; 
    position: relative;
} 
#content{
    width:500px; 
    height:200px; 
    background:green; 
    position:absolute;
    bottom:0;
}

Check it out: Demo

Answer 4

Give this a shot

#container{
    width:500px; 
    height:600px; 
    border:2px solid blue; 
    position: relative;
} 
#content{
    width:500px; 
    height:200px; 
    background:green; 
    position:absolute;
    bottom:0;
}

Check it out: Demo

Answer 5

Answer №3

$('#box-out').on('mouseenter', function(){
    $('#box-in').animate({
        height: '-400px'
    },2000);
});

How about making it expand upwards by reversing the height?

Answer 6

$('#box-out').on('mouseenter', function(){
    $('#box-in').animate({
        height: '-400px'
    },2000);
});

How about making it expand upwards by reversing the height?

Answer 7

Answer №4

You could experiment with using position absolute for better control over the positioning of elements. Check out this LIVE DEMO to see it in action.

#box-out
{
    width:300px;
    height:400px;
    border:1px solid black;
    position: relative;
} 
#box-in
{
    width:300px;
    height:100px;
    background:red;
    position:absolute;
    bottom:0;
}

Answer 8

You could experiment with using position absolute for better control over the positioning of elements. Check out this LIVE DEMO to see it in action.

#box-out
{
    width:300px;
    height:400px;
    border:1px solid black;
    position: relative;
} 
#box-in
{
    width:300px;
    height:100px;
    background:red;
    position:absolute;
    bottom:0;
}

What is the best way to place one box on top of another box?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing CSS to incorporate a background image into HTML code

Achieving proper stacking of a table with other div elements

Verify if the value in a textbox exceeds the number entered in an array of textboxes

Arranging Divs with Right Float Alignment

Arrange the Elements of Select Options

``Is there a faux pseudo element lurking within Firefox?"

top margin is functioning properly in Internet Explorer, but not in Google Chrome

jQuery's :last selector allows you to target the last

Is there a way to add a delay when opening all of the links on my web page

Dynamic jQuery slideshow with unique starting point

How can I integrate Apple remote support into a website with the use of Javascript?

Internet Explorer 7 sending cookies using Ajax

After changing the form action using jQuery, the GET variables mysteriously vanish

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

One method to include file upload path along with regular data when sending to controller using jQuery

Troubleshooting issue with parsing MySQL data in HTML table using Node.js

jQuery can be used to deactivate the submit button

What are some ways to customize the appearance of VueJS components?

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Differentiating onClick events for parent and child elements