Firefox는 테이블 요소에 대한 position : relative를 지원합니까?

Firefox는 테이블 요소에 대한 position : relative를 지원합니까?

---

내가 사용하려고하면 position: relative/ position: absolute켜짐 <th>또는 <td>파이어 폭스에서 작동하지 않는 것.

---

쉽고 가장 적절한 방법은 셀의 내용을 div로 감싸고 해당 div에 position : relative를 추가하는 것입니다.

예:

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

---

문제 없습니다. 다음도 설정해야합니다.

display: block;

---

Internet Explorer 7, 8 및 9를 포함한 모든 웹 브라우저는 테이블 표시 요소에서 position : relative를 올바르게 처리하고 FireFox만이를 잘못 처리하므로 JavaScript shim을 사용하는 것이 가장 좋습니다. 하나의 잘못된 브라우저에 대해서만 DOM을 재 배열 할 필요는 없습니다. 사람들은 IE가 뭔가 잘못되고 다른 모든 브라우저가 올바르게 얻을 때 항상 JavaScript shim을 사용합니다.

다음은 모든 HTML, CSS 및 JavaScript가 설명 된 완전히 주석이 달린 jsfiddle입니다.

http://jsfiddle.net/mrbinky3000/MfWuV/33/

위의 jsfiddle 예제는 "응답 성 웹 디자인"기술을 사용하여 반응 형 레이아웃에서 작동 함을 보여줍니다. 그러나 코드가 반응 할 필요는 없습니다.

아래에 JavaScript가 있지만 컨텍스트에서 그다지 의미가 없습니다. 위의 jsfiddle 링크를 확인하십시오.

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

---

Firefox 30부터는 position테이블 구성 요소에서 사용할 수 있습니다 . 현재 야간 빌드 (독립형으로 작동)로 직접 시도해 볼 수 있습니다. http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

테스트 사례 ( http://jsfiddle.net/acbabis/hpWZk/ ) :

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

You can continue to follow the developers' discussion of the changes here (the topic is 13 years old): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Judging by recent release history, this could be available as soon as May 2014. I can barely contain my excitement!

EDIT (6/10/14): Firefox 30 was released today. Soon, table positioning won't be an issue in major desktop browsers

---

As of Firefox 3.6.13, position: relative/absolute do not seem to work on table elements. This seems to be long standing Firefox behaviour. See the following: http://csscreator.com/node/31771

The CSS Creator link posts the following W3C reference:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

---

Try using display:inline-block it worked for me in Firefox 11 giving me positioning capability within the td/th without destroying the layout of the table. That in conjunction with position:relative on a td/th ought to make things work. Just got it working myself.

---

I had a table-cell element (which was actually a DIV not a TD)

I replaced

display: table-cell;
position: relative;
left: .5em

(which worked in Chrome) with

display: table-cell;
padding-left: .5em

Of course padding usually is added to width in the box model - but tables always seem to have a mind of their own when it comes to absolute widths - so this will work for some cases.

---

Adding display:block to the parent element got this working in firefox. I also had to add top:0px; left:0px; to the parent element for Chrome to work. IE7, IE8, & IE9 are working as well.

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

---

The accepted solution kind of works, but not if you add another column with more content in it than in the other one. If you add height:100% to your tr, td & div then it should work.

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

The only problem is that this only fixes the column height problem in FF, not in Chrome and IE. So it's a step closer, but not perfect.

I updated a the fiddle from Jan that wasn't working with the accepted answer to show it working. http://jsfiddle.net/gvcLoz20/

참고URL : https://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements