The built-in unit is not calibrated to fit its children when they are located absolutely

Here is the scenario of my problem: http://jsfiddle.net/875190we/

        <div style = "display:inline-block">
        <span>a</span>
        <span style = "position:relative;top:-1px; font-size:13px">x</span> 3
    </div>

I would like to say "ax3" (as if it were not contained in an absolute element).

I use the absolute value to position it to the right and outside the gray element. I basically want this element to be to the right of the gray element (which itself has a large document structure). But the second I put the built-in INSIDE block of an absolutely positioned element as such, it stops the installation of its children.

+4
source share
1 answer

, initial 40px calc(100%).

<body>
    <div style="width:200px;background:grey;position:relative;">hi
        <div style="position:absolute; left:100%; top:0; overflow: visible; width: calc(100%);">
            <div style="display:inline-block"><span>a</span><span style="position:relative;top:-1px; font-size:13px">x</span> 3</div>
        </div>
    </div>
</body>
Hide result

( float: left; position: absolute;)

:

0

All Articles