如何在不使用位置和边距的情况下将元素放置在另一个元素的顶部？

Question

This is my code:

<table>...Some content...</table>
<table>...Another content...</table>

I want to put the second table on top of the first table. This is to be used as an email template (in some clients position and margin are not available).

Answer 1

Those are the only two options available (outside of transform , which definitely won't work if position isn't available) that will allow one element to invade another element's space. If you can't use position or margin , then you're out of luck, and you need to re-evaluate what you are trying to achieve and why. Any chance you could do this with images?

Answer 2

There are always ways...not always elegant, but when you have limited options, 'works' is often all you really need. IMO, creativity is as much about solving a problem with limited options as it is thinking 'outside the box'.

Most email clients allow you to set 'height', so simply wrap the first table (the background) in a div and give that div height:0px; . the table will overflow the div, but the next element won't respect it's space because it has 0 height, and will effectively be layered in front.

http://jsfiddle.net/L0d3tnzu/

If you want the size of the tables to match exactly, you'll probably have to explicitly set heights and widths, but the fiddle above illustrates the basic concept. Hope this helps!

EDIT: Based on the additional info in the comment (the second table should only partly overlap the first table) here is an updated fiddle: https://jsfiddle.net/acq3ob6y/1/

EDIT #2: Dang. Outlook switching to the Word/Office rendering engine for HTML/CSS might be the only way possible to get WORSE than the IE version. Sigh. (Thanks to @Gortonington for the comment/clarification, though!)

Ok, then, the idea of a background image is only a problem for retina displays (if you want them to be all crisp and beautiful and retina-ie), and retina devices are going to be handling CSS in a more modern way (hopefully!), so how about this as a solution: Media Query targeting device resolution loads CSS with the double-size img and uses css background-size to constrain it: http://jsfiddle.net/tcyjo7ok

Third try is a charm? At least the list of options is growing...

Answer 3

The only way to overlay two elements across email clients is through use of background images. Even this can be broken in some clients and requires a lot of conditional and reiterate code ( backgrounds.cm is good resource for email bg images).

This is the only option that will display in MOST clients. Even this is still very restricted and not very agile to use (but that is true in ALL email coding). Most other techniques will only work for a couple clients and break completely in all others.