如何在不使用位置和邊距的情況下將元素放置在另一個元素的頂部？

Question

這是我的代碼：

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

我想將第二張桌子放在第一張桌子的頂部。 這將用作電子郵件模板（在某些客戶中，頭寸和保證金不可用）。

Answer 1

這是僅有的兩個可用選項（在transform之外，如果沒有position ，則肯定不起作用）將允許一個元素侵入另一個元素的空間。 如果您不能使用position或margin ，那么您就走運了，您需要重新評估您想要實現的目標以及原因。 您是否有可能對圖像執行此操作？

Answer 2

總有一些方法……並不總是那么優雅，但是當您的選擇有限時，“作品”通常就是您真正需要的。 IMO認為，創造力不僅在於解決“選擇框框式”問題，還在於其解決方案有限的問題。

大多數電子郵件客戶端允許您設置“高度”，因此只需將第一個表（背景）包裝在div中，然后將該div的height:0px; 。 該表將使div溢出，但是下一個元素將不尊重它的空間，因為它的高度為0，並將有效地放在前面。

http://jsfiddle.net/L0d3tnzu/

如果希望表的大小完全匹配，則可能必須顯式設置高度和寬度，但是上面的小提琴說明了基本概念。 希望這可以幫助！

編輯：根據注釋中的附加信息（第二個表應僅部分重疊第一個表），這里是更新的小提琴： https : //jsfiddle.net/acq3ob6y/1/

編輯2：當當。 將Outlook切換為HTML / CSS的Word / Office渲染引擎可能是獲得WORSE的唯一方法，而不是IE版本。 嘆。 （不過，感謝@Gortonington的評論/澄清！）

好吧，那么，背景圖像的想法只是視網膜顯示器的問題（如果您希望它們都清晰美觀，視網膜即是），並且視網膜設備將以更現代的方式處理CSS（希望！），那么作為解決方案如何：以設備分辨率為目標的媒體查詢以CSS大小的img加載CSS，並使用CSS background-size進行約束： http : //jsfiddle.net/tcyjo7ok

第三次嘗試是魅力嗎？ 至少選項列表正在增長...

Answer 3

在電子郵件客戶端上覆蓋兩個元素的唯一方法是使用背景圖像。 甚至在某些客戶端中這也可能被破壞，並且需要很多有條件的和重復的代碼（ background.cm是電子郵件bg圖像的良好資源）。

這是將顯示在MOST客戶端中的唯一選項。 即使這仍然非常受限制，並且使用起來也不十分敏捷（但這在所有電子郵件編碼中都是如此）。 大多數其他技術僅對幾個客戶有效，而在其他所有客戶中則完全失效。