どのようにして、要素が「絶対的に」および「相対的に」同じように機能するように配置するにはどうすればよいですか？ - CSS

Question

あなたがここでの実装を見ることができます：あなたはボックス＃1内の名前のいずれかをクリックするとhttp://jsfiddle.net/BMWZd/25/

を、あなたはボックスの左上隅の円が上下に移動し、表示されます。

どうすればいいですか？また、すべてのブラウザサイズの各ボックスの左上隅に表示されていることを確認しますか？

したがって、position：absoluteは、周囲の状況にかかわらず1つの場所に保持します。しかし、それはdiffブラウザのサイズで（比較的）同じ位置に置くことはありません。

ただし、位置は相対的です。

どのように私は両方の世界のベストを得るのですか？

Answer 1

ので位置：絶対に関係なく、何が起こるかのいずれかの場所に保管しますその周りに。しかし、それはdiffブラウザのサイズで（比較的）同じ位置に置くことはありません。

位置は、reset fileを使用する場合は同じにする必要があります。少なくとも理論的には。

私の経験では、対話的にサイズを変更する要素がある場合、レイアウト上の「驚き」を避ける最善の方法は、配置にボックスモデルを使用せず、要素のサイズを変更する"絶対に配置されています。

お使いの場合には

、私はTDSの位置を作ると思いますし、その中のすべてのものは、絶対位置：

• TDS position:relative
• はCSSクラス#sit-in-cornerからfloat:leftと余白を削除してください。ポジションアブソリュートにして、topとleftを追加して配置します。

ここで、丸で囲まれた数字は、リンクの影響を受けていないはずです。あなたはtd内に必要な（余白など）内部テーブルを置くことができますが、私はposition：absoluteのためにも行きます。

EDIT - tdのサイズが変更されていることに奇妙に反応したため、問題が発生していたことに気付きました。

これは主にtd内にdivを入れて、tdからクラス '破線パネル'を削除してdivに配置することで解決しました。また、クラス '破線パネル'をposition：relative、および上記の変更にしました。結果はhttp://jsfiddle.net/BMWZd/30/

で見ることができ

私はすべての余分なものを削除する必要があり、jsfiddleはそんなに（？）HTMLとあまりにも遅かったです。

Answer 2

私はこれがあなたの質問に直接答えるわけではないことを知っていますが、もっと良い解決策になると思います。私が間違っているなら、私を修正してください。

私はあなたのレイアウトを見て、IMHOはちょっと複雑すぎます。私はあなたがそれを単純化することによって恩恵を受けると思います。

私がした簡単な例です。正直なところ、あなたのニーズに合っているかどうかは分かりませんが、何らかの形で役立つかもしれません。

JS：

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function(){ 

    $('li').click(function(){ 
     $('.circle').removeClass('inactive').addClass('active'); 
     $('li').removeClass('big'); 
     $(this).addClass('big'); 
    }); 

    }) 
</script> 

スタイル：

<style> 
    li{ 
    cursor: pointer; 
    } 
    #super-container{ 
    width: 200px; 
    height: 200px; 
    background: #F2F2F2; 
    } 
    #circle-container{ 
    padding: 10px; 
    height:50px; 
    } 
    .circle{ 
    border: #FF0000; 
    width: 50px; 
    height: 50px; 
    } 
    .active{ 
    background: #AA0000; 
    } 
    .inactive{ 
    background: #330000; 
    } 
    .big{ 
    font-size: 2em; 
    } 
</style> 

マークアップ：

<div id="super-container"> 
    <div id="circle-container"> 
    <div class="circle inactive"></div> 
    </div> 
    <ul id="the-buttons"> 
    <li>Button 1</li> 
    <li>Button 2</li> 
    <li>Button 3</li> 
    <li>Button 4</li> 
    </ul> 
</div>