Question

I have 3 div containers, namely, #containerA, #containerB and #containerC.

I want to position #containerB within #containerA and with respect to
#containerA‘s coordinates. So, I set #containerA to have position:
relative and #containerB to have position: absolute. This way:

#containerA {
  position: relative;
}
#containerB {
  position: absolute;
}

This works fine between #containerA and #containerB. Now, I want to
make #containerC to be within and with respect to #containerB. However, setting the
#containerB to have position: relative would cause #containerB to lose
respect to #containerA. The code would look this way:

#containerA {
  position: relative;
}
#containerB {
  position: relative;
}
#containerC {
  position: absolute;
}

So, what should I do to get the divs to nest in one another in such a
way where #containerC is positioned with respect to #containerB and
#containerB is positioned with respect to #containerA?

Answer 1

Step 1: You set #containerA to have position: relative;; then #containerB and #containerC to have position: absolute;.

Step 2: You position #containerB using, let’s say left: 10px; and top: 20px; (just examples, you can replace the values with whatever you wish).

Step 3: Let’s say you want to position #containerC to be 5px from the top and 5px from the left of #containerB. Then you set left: 5px; and top: 5px;

Test: http://dabblet.com/gist/2788586 – element with cyan background has position: static. It can be set to relative.