如何使这就像两个“绝对”和“相对”定位在同一时间，我位置的元素？ -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太慢了。