Overlapping CSS elements

Question

I would like to make the blue element sit halfway up the green circle and behind it. How can I do that? Also, why is there a random marginal-space between the green circle and the blue element?

enter image description here

#profile-circle {
    margin-right: auto; margin-left: auto;
    height: 164px; width: 164px;
    border-radius: 84px 84px 84px 84px;
}

#main-container {
    margin-right: auto; margin-left: auto;
    height: 400px; width: 450px;
}

http://jsfiddle.net/LqJ79/

You shouldn't rely on 3rd party sites in order to demonstrate your problem. Add the important code to the question, in case jsfiddle goes down. — jeffjenx
– jeffjenx, Commented Jul 5, 2012 at 18:39

kapa · Accepted Answer · 2012-07-05 18:37:28Z

2

position: relative will help you here. It allows you to use z-index to put the circle over the box, and also you can use top which will move the box relative to its current position. The problem with position: absolute is that it takes the element out of the flow, which is not what you need here I think.

#profile-circle {
    position: relative;
    z-index: 100;
}

#main-container {
    position: relative;
    z-index: 50;
    top: -100px;
}

See the demo

answered Jul 5, 2012 at 18:37

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Ashton · Accepted Answer · 2012-07-05 18:37:19Z

0

Use attributes "position: absolute;" in the second box, I updated js fiddle CSS with the following:

#main-container {
    margin-right: auto;
    margin-left: auto;
    height: 400px;
    width: 450px;
    background-color: blue;
    position: absolute;
    top: 80px;
}

answered Jul 5, 2012 at 18:37

Ben Ashton

1,40512 silver badges15 bronze badges

Comments

mwcz · Accepted Answer · 2012-07-05 18:38:46Z

0

The easiest way to move the blue element up is to set a negative top margin:

margin-top: -82px;

However, with your current markup, the blue element will sit on top.

You can either put the green element below the blue one in your HTML, then use CSS to slide it up, or you can:

use position: relative; on both elements
set a z-index on the blue and green elements to determine which appears on top (give the green element a higher number so it appears on top)
set top: -82px; on the blue element to slide it up under the green one

The space between them is due to your margins:

margin-top: 15px;
margin-bottom: 5px;

answered Jul 5, 2012 at 18:38

mwcz

9,47110 gold badges46 silver badges65 bronze badges

Comments

TitanicSwimmer · Accepted Answer · 2012-07-05 18:41:40Z

0

you can make the position: fixed; top:10px; left: 10px; z-index: 1; and what not in the css to move them around. like this:

http://jsfiddle.net/LqJ79/

answered Jul 5, 2012 at 18:41

TitanicSwimmer

2992 gold badges4 silver badges14 bronze badges

Comments

Anshul · Accepted Answer · 2012-07-05 18:46:54Z

0

The 'magical' space between the two is due to the margin in the div user-info. I changed the CSS to the following:

#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}

This will removed the space.

answered Jul 5, 2012 at 18:46

Anshul

8061 gold badge7 silver badges9 bronze badges

Collectives™ on Stack Overflow

Overlapping CSS elements

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related