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

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

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

예:

<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>

https://bugzilla.mozilla.org/show_bug.cgi?id=63895 여기에서 개발자가 변경 사항에 대한 토론을 계속 수행 할 수 있습니다 (주제는 13 세입니다 ).

최근 출시 이력으로 판단 할 때 2014 년 5 월부터 출시 될 예정입니다.

편집 (6/10/14) : Firefox 30이 오늘 릴리스되었습니다. 곧 주요 데스크톱 브라우저에서 테이블 위치가 문제가되지 않습니다.

Firefox 3.6.13부터 position : relative / absolute가 테이블 요소에서 작동하지 않는 것 같습니다. 이것은 오랫동안 Firefox의 행동으로 보입니다. 다음을 참조하십시오 : http://csscreator.com/node/31771

CSS Creator 링크는 다음 W3C 참조를 게시합니다.

테이블 행 그룹, 테이블 헤더 그룹, 테이블 바닥 글 그룹, 테이블 행, 테이블 열 그룹, 테이블 열, 테이블 셀 및 테이블 캡션 요소에 대한 'position : relative'의 효과 정의되지 않았습니다. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

사용해보십시오 display:inline-block그것은 나를 테이블의 레이아웃을 파괴하지 않고 / TD를 내 일을 기능의 위치를 제공하는 파이어 폭스 (11)에 날 위해 일했습니다. 그것은 position:relativetd / th 와 함께 작동하여 일을해야합니다. 방금 일하게했습니다.

나는 table-cell요소가 있었다 (실제로는 DIV아니었다 TD)

나는 바꿨다

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

(Chrome에서 작동)

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

물론 패딩은 일반적으로 상자 모델에서 너비에 추가되지만 테이블은 절대 너비와 관련하여 항상 자체적으로 생각하는 것처럼 보이므로 일부 경우에는 작동합니다.

부모 요소에 display : block을 추가하면 firefox에서 작동합니다. 나는 또한 top : 0px를 추가해야했다. 왼쪽 : 0px; Chrome이 작동하려면 부모 요소에 추가하십시오. IE7, IE8 및 IE9도 작동합니다.

<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>

허용되는 솔루션은 작동하지만 다른 열보다 내용이 더 많은 다른 열을 추가하는 경우에는 작동하지 않습니다. tr , td & div에 추가 height:100%하면 작동합니다.

<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>

유일한 문제는 Chrome 및 IE가 아닌 FF의 열 높이 문제 만 수정한다는 것입니다. 따라서 한 걸음 더 가까이 있지만 완벽하지는 않습니다.

Jan이 승인 한 답변으로 작동하지 않는 바이올린을 업데이트하여 작동 시켰습니다. http://jsfiddle.net/gvcLoz20/