如何使這就像兩個“絕對”和“相對”定位在同一時間，我位置的元素？ -CSS

Question

您可以在此處查看實現： http : //jsfiddle.net/BMWZd/25/

當您單擊Box＃1中的名稱之一時，您會看到該框左上角的圓圈上下移動。

我該如何阻止呢？ 同時，還要確保它顯示在所有瀏覽器尺寸的每個框的左上角？

所以position：absolute會將它放在一個地方，而不管周圍發生了什么。 但這不會將它放在差異瀏覽器大小的完全相同的位置（相對）。

但立場：相對意願。

如何獲得兩全其美？

Answer 1

我知道這並不能直接回答您的問題，但是我認為這可能是更好的解決方案。 如果我錯了，請糾正我。

我看了一眼您的布局，恕我直言，這有點太復雜了。 我認為您將從簡化中受益。

這是我做的一個簡單示例。 老實說，我不知道它是否適合您的需求，但也許它會以某種方式有用。

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>

Answer 2

所以position：absolute會將它放在一個地方，而不管周圍發生了什么。 但這不會將它放在差異瀏覽器大小的完全相同的位置（相對）。

如果您使用的是重置文件，則位置應相同。 至少在理論上。

以我的經驗，當某些元素以交互方式更改其大小時，避免在布局上出現“意外”的最佳方法是不使用盒模型進行定位，而將“圍繞其大小更改的元素”周圍的所有內容都絕對定位。

在您的情況下，我將使tds位置相對，並且將其中的所有內容絕對定位：

• 使tds position:relative
• 從CSS類#sit-in-corner刪除float:left和margins。 通過使其處於絕對位置並添加top和left對其進行定位。

現在，帶圓圈的數字應該在鏈接的“影響范圍之外”。 您可以根據需要將內部表（邊距等）放在td中，但我也要保留位置：絕對值。

編輯-注意到該問題正在發生，因為td對其中更改尺寸的事物產生了奇怪的反應。

解決此問題的方法主要是將div放在TD內，從TD上刪除類“虛線面板”，然后將其放在div上。 同樣，使類“虛線面板”成為position：relative，並進行上面的更改。

結果可以在http://jsfiddle.net/BMWZd/30/中看到

我必須刪除所有多余的東西，jsfiddle使用太多（？）html太慢了。