Is there a way in HTML to set horizontal absolute positioning and vertical static positioning?

I have a variable number of "gadgets" in a site absolutely positioned in the viewport. I have them positioned with 'top' and 'left' properties. These gadgets are elements that can be arbitrarily added by users by dragging them from a little config panel to the viewport itself. The gadget absolute position is determined when the user drop the gadget. That position is saved in the database.

The problem appeared when I tried to generate a print layout and expand the gadgets vertically . In fact I want to do this because most of the gadgets are tables (jqGrids), and I want them to show more rows in the printable mode than in the normal screen mode. So the problem is that when I expand the grids vertically they may overlap (almost always they will overlap).

The desired result will be the one in the tittle, keep the left position absolute and the top static. I don't know any straightforward solution to this issue, is there any?

Here is a possible arrangement (when gadget1 and 2 are expanded they will overlap gadget3)

    +---------+
    |         |       +--------------------------------+
    |    1    |       |                                |
    +---------+       |                2               |
 开发者_JAVA百科                     +--------------------------------+

            +------------------+
            |        3         |
            +------------------+

Thanks!

Override position: absolute with position: static in your print stylesheet and use margin-left: Npx instead of left: Npx for horizontal positioning.