Составьте таблицу частично перекрывает изображение

Question

я следующий HTML-код:

<table class="layout"><tr><td> 
    <img src="image.jpg" style="float:right;" /> 
    <table> 
    <tr><td>Blah</td><td>Blah</td></tr> 
    <tr><td>Blah</td><td>Blah</td></tr> 
    </table> 
</table> 

Это визуализируется следующим образом:

+-------------------------------------------+ 
|  +-----------------------------------+| 
|  |         | 
|  |    (image)    | 
|  |         | 
|  +-----------------------------------+| 
|+----++----+        | 
||Blah||Blah|        | 
|+----++----+        | 
||Blah||Blah|        | 
|+----++----+        | 
~           ~ 
+-------------------------------------------+ 

Который имеет смысл, потому что таблица представляет собой блок-элемент, который делает а не для переноса и сдвигается вниз, чтобы очистить изображение. Тем не менее, то, что я пытаюсь выполнить, чтобы сделать таблицу частично перекрывать изображение:

+-------------------------------------------+ 
|+----++-----+-----------------------------+| 
||Blah||Blah|        | 
|+----++----+   (image)    | 
||Blah||Blah|        | 
|+----++----+------------------------------+| 
~           ~ 
+-------------------------------------------+ 

Это осложняется тем фактом, что все содержание страницы живет внутри таблицы макета (это унаследованный код, используя CSS для макета будет, конечно, предпочтительнее, но я застрял с этим как есть). Использование position: absolute на изображении позиционирует его абсолютным относительно окна просмотра, а не таблицы макета. то есть к краю видового экрана правой стороны, а не к краю стола макета стороны правой стороны.

Каков наилучший способ для этого?

Answer 1

Чтобы предотвратить внутреннюю таблицу из позиционирует себя по отношению к иллюминатору, вам нужно использовать position: relative на родительской таблице

Использование position: absolute и top/left/right/bottom на внутренней таблицы, чтобы получить позицию, которую вы хотите.

Have an example!

CSS

.layout { 
    position: relative; 
} 

.layout table { 
    position: absolute; 
    top: 0; 
} 

---

В зависимости от того, насколько беспорядка вашего наследия макет, вы можете иметь проблемы с другими детьми этой таблицы. В этом случае оберните все внутри родительской таблицы в <div> и сделайте вместо этого position: relative.

Second example with inner div wrap.

HTML

<table class="layout"><tr><td> 
    <div class="relative"> 
     <img src="image.jpg" style="float:right;" /> 
     <table> 
     <tr><td>Blah</td><td>Blah</td></tr> 
     <tr><td>Blah</td><td>Blah</td></tr> 
    </table> 
    </div> 
</td></tr><!-- close that cell and row! --> 
</table> 

CSS

.layout .relative { 
    position: relative; 
} 

.layout table { 
    position: absolute; 
    top: 0; 
} 

Answer 2

Добавьте один DIV вокруг внутренней таблицы и назначить float:left

<table class="layout"><tr><td> 
    <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" style="float:right;" /> 
    <div style="float:left"> 
    <table> 
    <tr><td>Blah</td><td>Blah</td></tr> 
    <tr><td>Blah</td><td>Blah</td></tr> 
    </table> 
    </div> 
</table> 

DEMO

Answer 3

Вы можете поместить отрицательный запас на стол, чтобы он сдвинулся вверх. Но так как это просто образ, почему у него нет изображения на фоне таблицы?

table#myTable { 
    background-image: url('/path/to/image.jpg'); 
    background-position: 50px /*50px to the right*/ top; 
}