How to move up an inner box and keep outer box in place with CSS?


Tags: css

Problem :

I have the following code:

<html>
<head>
<style>
#yellow {height:100px; background:yellow;}
#blue {background:blue;}
#red {background:red; width: 400px; height: 100px; margin:0px auto;}
</style>
</head>
<body>
        <div id="yellow"></div>
        <div id="blue">
                <div id="red">Lots of content goes in here that will expand the outer blue box as well</div>
        </div>
</body>
</html>

I want the red box to move up about 30 pixels so that it overlaps both the yellow box and the blue box. When i tried to do a #red {margin:-30px auto 0px auto;}, the blue box moved up 30 pixels with the red box as well, even though I wanted the blue box to stay in place.

How do i make the redbox move up and overlap both the yellow and blue?



Solution :

Here you go.

#yellow {
    height:100px;
    background:yellow;
}
#blue {
    background:blue;
}
#red {
    background:red;
    width: 100px;
    height: 100px;
    margin:0px auto;
    position:relative;
    top:-30px;
}

    CSS Howto..

    How to force modern Internet Explorer to show proper gradient background in real web sites

    How to toggle two buttons on mouse hover?

    Quick beginner CSS, how to “scope” styles?

    HTML & CSS - Table attribute in CSS is behaving usual. Don't know how to fix it

    How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

    How to add space between table cells `td`?

    How to make html lists horizontal in css?

    GWT - How to create a drop down menu

    How can I stop an image element from taking 100% width?

    how to align css content string

    how to select last element in the page?

    How to Center Rotated text with CSS

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    ASP.NET How to set Text to the right side of image

    how to use input[type=range] CSS Pseudo-elements with firefox and IE

    How to change height of a dynamically embedded gist?

    How do browsers handle unrecognized at-rules?

    How to move the blue twitter bird slowly using css and js?

    How can I do html multi elements list with type attribute?

    How to perform media queries if either statements are correct?

    How do I code a close link to js accordion panels?

    How do I position a div under a fixed position div

    how does responsive design work?

    How to create a div with a diagonal (or angled) top line

    How to write css for that?

    How slow is * css selector for mobile browsers?

    How can i overwrite media queries defined in Bootstrap CSS

    How to push up text in CSS?

    How to override the height of parent node using CSS?

    How to pass JavaFX variable into CSS style?