css - テキストを重ねる方法

Question

2 DIVを横に重ねたい。DIV 内のコンテンツもオーバーラップさせたい。以下の例では、aaaaaaa はブロック A をラップしており、予想される動作は、aaaaaaa が div B の左端から始まるようにすることです。どうすればこれを達成できますか?

<div id="A" style="float:left;position:relative; background: #987321; width: 100px; height: 300px; z-index:5; "></div>`
<div id="B" style=" background: #555; width: 400px; height: 400px; ">aaaaaaaaaa</div>

フィドル

Answer 1

これを試して：

CSS

<style>
    div.a {
        width:      100px;
        height:     300px;
    }

    div.b {
        position:   relative;
        z-index:    0;
        width:      400px;
        height:     400px;
        margin-top: -300px;
        border:     1px solid red;
    }

    div.c {
        position:   relative;
        z-index:    1;
        height:     100%;
        border:     1px solid blue;
    }
</style>

HTML

<div class="a">
    <div class="c">div A's content</div>
    <div class="b">div B's content xxxxx</div>
</div>