I have a block `<div>` I want to define with precise pixel coordinates via `position: absolute`, but I want to position a heading above its parent `<div>`. If the font-size changes (or the user enlarges the text), the block `<div>` must stay in exactly the same place, but the heading may move up/down to accommodate the larger/smaller text.

Here is some sample code that, honestly, doesn't come close, but may help to illustrate the problem. It's just one of the variations I tried:

```
<!doctype html>
<html>
<head>
<title>Positioning Test</title>
<style>
    #box1 { border: red 1px solid; }
    #box1 h4 { margin: 0; color: blue }
    .inner_box {
        background: #aaf;
        width: 400px;
        height: 50px;
    }
    .target_pos {
        position: absolute;
        top: 50px;
        left: 100px;
    }
    #marker {
        width: 10px;
        height: 10px;
        background: red;
    }
</style>
</head>
<body>

<div id="box1">
    <h4>Heading</h4>
    <div class="inner_box target_pos">
        This is the <strong>inner_box</strong>.
    </div>
</div>

<!-- Marks where the inner_box should begin -->
<div id="marker" class="target_pos"></div>

</body>
</html>

```

The idea is the blue `inner_box` must be positioned exactly at the `marker` (which it is), but the `Heading` text must be directly above it, and the red 1px border should enclose everything.

Here is how it looks in Firefox:

![Actual code from Firefox](https://i.stack.imgur.com/T3mM3.png)

And here's how I would like it to look instead:

![Mockup of desired appearance](https://i.stack.imgur.com/OZgD8.png)

Since I have several of these boxes to work with, and their positions may change depending on viewport size, and the heading font/text will vary, I need a dynamic solution, here. I would prefer pure CSS3, but if JS is required, I could live with that.