Absolute positionning inside TD

Pour pouvoir garder visible les étiquettes et liens dans le gabarit d'affichage

by Bruno G.

HTML

<table>
    <tr>
        <td style="vertical-align:top">
            <div class="box1">
                <span class="box2">Label</span>
            </div>
        </td>
        <td>
            <table>
                <tr>
                    <td style="vertical-align:top;background-color:red">
                        <div class="box1">
                            <span class="box3">Label</span>
                        </div>
                    </td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non metus vitae elit viverra congue eget vitae orci. Duis lacus felis, bibendum sit amet dictum a, laoreet quis lectus. Morbi vel augue eget tortor tempus consequat. Integer arcu nisl, imperdiet mattis porta non, mollis et ligula. Vestibulum suscipit fermentum massa eget lacinia. Nunc at venenatis lacus. Ut pulvinar luctus purus, ac imperdiet mi dictum sed. Donec et sapien augue. Curabitur a metus ac sem dignissim imperdiet. Morbi lobortis vestibulum nulla, id pellentesque dolor varius vel. Sed ac laoreet nibh. Mauris iaculis nulla nec nunc molestie porttitor. Proin fermentum scelerisque mattis.</td>
                </tr>
                <tr>
                    <td style="vertical-align:top">
                        <div class="box1">
                            <span class="box4">Label</span>
                        </div>
                    </td>
                    <td>Fusce vel lectus neque. Nullam nibh enim, laoreet nec vulputate non, bibendum quis metus. Vestibulum sit amet commodo lorem. Suspendisse lacinia faucibus augue vitae consectetur. Donec sit amet mi dui, sit amet aliquet sapien. Donec malesuada vehicula imperdiet. Sed eu sagittis quam.

Phasellus a auctor sem. Vivamus cursus orci ut odio vestibulum dignissim. Maecenas sit amet nisi eros. Duis nulla enim, elementum a suscipit sed, egestas ac augue. Duis volutpat auctor turpis, ut blandit tellus consectetur vitae. Nullam a aliquet est. Sed pharetra, elit eu...

CSS

.box1 { position: relative }
.box2 { position: fixed; top: 200px }
.box3 { position: absolute; top: 230px }

/* Styling */
.box1 { background: #ddd; width: 95px }
.box2, .box3, .box4 { background: #bbb; width: 95px }
body  { font-family: sans-serif }