All geek questions in one place

Question about Div Position in Firefox

I am working on this code and this code works fine in Chrome but not in Firefox

Here is the code

 <html lang="en-US"> <body><table style="width: 100%;"> <tbody><tr> <td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;"> <div style="position: absolute; background-color: blue; height: 100%; width: 100%;"></div></td> <td style="position: relative; width: 50%; height: 500px;"></td> </tr> </tbody></table> </body> </html>

If you want to see JSFiddle here for code to work

Please explain to me why the div in Firefox , covering the entire width of the screen, should only cover 50% of the width when displaying Chrome .

+4
source share
2 answers

Perhaps because of the 2.1 specification, the relative positioning of table-table elements is undefined by CSS:

The position of the box is calculated according to the normal flow (this is called the position in the normal flow). Then the field shifts relative to its normal position. When field B is located relative to each other, the position of the next block is calculated as if B were not offset. The "position: relative" effect for the table-row, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell and table signature elements are undefined.

This is not the case in the Positioned layout module (they explicitly define the behavior), but have not yet been accepted by the suppliers.

+3
source

The problem is position: absolute; internal div:

 <html lang="en-US"> <body> <table style="width: 100%;"> <tbody> <tr> <td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;"> <div style="background-color: blue; height: 100%; width: 100%;"></div> </td> <td style="position: relative; width: 50%; height: 500px;"> </td> </tr> </tbody> </table> </body> </html>

You can check this with the update I made for your jsfiddle .

If you really need to use an absolute positioned div inside a cell, then you should put a relative positional div inside that cell that contains an absolute:

 <td> <div style="position: relative; ... "> <div style="position: absolute;... "> ... </div> </div> </td>

This is another update to the original jsfiddle showing the absolute div inside the relative, with an offset of 30 to the left and 10 from the top.

This old thread here in stackoverflow might be useful: Using the Relative / Absolute position in TD?

+1
source

Source: https://habr.com/ru/post/1485507/

More articles:


All Articles