Question

I have a structure like this:

<div class="a">
  <div class="b">
    <div>
      <div class="c">
      </div>
    </div>
  </div>
</div>

CSS:

.a { position:relative; }
.b { position:absolute; }

I understand that defining top and left/right properties positions absolute div to either its parent with position:relative or to the browsers window if such a parent doesn’t exist. What I’m faced with, I cannot change the CSS for .a and .b. And I need .c to be on top of .a and slightly out of it. So that .a doesn’t get a scroll bar.

Some ASCII art to illustrate, I guess 🙂

I have:

-------------------
|   .a           |^|
|                | |<-- Scroll bar
|   ------       | |
|   | .c |       |*|
-------------------

I need:

--------------------
|   .a             |
|                  |<-- No scroll bar
|   ------         |
|   | .c |         |
----|    | ---------
    |    |
    ------

Answer 1

This solution will stack all items and the <div class="c"> will reach out of its parent container:

.a {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background: #eee;
}
        
.b {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  background: #ccc;
}
        
.c {
  position: absolute;
  bottom: -50px;
  left: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid orange;
  background: #aaa;
}

<div class="a">
  <div class="b">
    <div>
      CONTENT
      <div class="c"></div>
    </div>
  </div>
</div>

Note that this will only work, if the parent container has overflow:visible. When one of the parents has overflow:hidden|scroll you can’t solve this, I guess.