HTML, CSS positioning of divs

Question

I want to know how to position multiple div's on each other, without position absolute in HTML.

I tried with position: absolute but due to this, I have to specify container div height explicitly, which I don't want to do.

SEE THIS http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute — Balvant Ahir, Jun 22 '16 at 10:43
Are you looking something like this: https://jsfiddle.net/xs1ka3z4/1/ — Teuta Koraqi, Jun 22 '16 at 10:45
Your question is light on details. Please elaborate on what the issue is and include the code you are working with. See [ask] — j08691, Jul 01 '16 at 13:58
Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — kunal, Dec 23 '16 at 12:03

Carele · Answer 1 · 2016-07-01T13:54:30.077

2

How do you want to place them exactly ?

If they are div, they should be on top of each other with position: static by defaults. If you don't want to use position: absolute, you could use negative margins. This is not a recommended solution, but the hack definitely works.

.d1 {
  background-color: red;
  height: 200px;
  width: 150px;
 }

.d2 {
  background-color: blue;
  height: 150px;
  width: 100px;
  margin-top: -100px;
 }

<div class="d1"></div>
<div class="d2"></div>

Note that you can use % margins if needed but the % margin properties will always be a percentage of the parent block WIDTH. So be careful with that.

NB : Tanks to @Oriol for correcting mistakes I made. I edited my answer thanks to his advice.

edited Jul 01 '16 at 13:54

answered Jun 22 '16 at 10:45

Carele

756
3
13

Margin percentages are resolved according to the width of the containing block, which may be different than the width of the window. And the default is `position: static`, not `position: relative`. – Oriol Jul 01 '16 at 11:53
Thanks for pointing both things out. I made shortcuts in my explanation because the differences were not particularly relevent between what i mentionned and the reality. However this is inacurate and i appologize. I edit my post – Carele Jul 01 '16 at 13:52

score 0 · Answer 2 · edited May 23 '17 at 12:09

Not sure what you're trying to achieve but I can imagine only one scenario, where something like that would be usefull. Namely switching between several divs. If that's the case use display:none on all but the current div.

In anyway child div is by default "overlapping" with parent div, so I assume what you mean is that you want siblings to be "on each other"... however that sounds.

The only way to do this is (except for negative margin hacks) absolute and relative positioning.

Here's how:

#foo{
  background-color:red;
  height: 50px;
  width: 50px;
  position: relative;
}
#bar{
  background-color:blue;
  height: 50px;
  width: 50px;
  position: absolute;
}
#foobar{
  background-color: green;
  height: 50px;
  width: 50px;
  position: absolute;
}
#raboof{
  background-color: yellow;
  height: 50px;
  width: 50px;
}

<div id="foo">
  <div id="bar"></div>
  <div id="foobar"></div>
  <div id="raboof"></div>
</div>

Jsfiddle: https://jsfiddle.net/t81hvsa1/

Keep in mind that: 1. You may but don't need to make last child absolutely positioned. 2. The last absolutely positioned child will always be on top.

Edit: I've just noticed, this question's discussion has all the answers you could possibly want; more elaborate and better formatted at that.

It can well be auto height as long as you keep one of the child's position (preferrably the last one) anything but absolute or fixed. I've edited the [fiddle](https://jsfiddle.net/t81hvsa1/5/) and commented out the background colors of child divs, so you see that foo height extends to the the height of not absolutely positioned raboof. You change raboof height and foo's height adjusts to it automatically. — P.Pal, Jul 01 '16 at 11:34

HTML, CSS positioning of divs

2 Answers2