Question

您可以在此处查看实施：http://jsfiddle.net/BMWZd/25/

当您点击方框＃1中的某个名称时，您会看到方框左上角的圆圈上下移动。

我该怎么做？同时，确保它显示在所有浏览器尺寸的每个框的左上角？

所以位置：绝对会将它保持在一个地方而不管它周围发生了什么。但是它不会在差异浏览器大小上（相对）处于完全相同的位置。

但是位置：相对意志。

我如何充分利用这两个世界？

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

所以位置：绝对会将它保持在一个地方而不管它周围发生了什么。但是它不会在差异浏览器大小上（相对）处于完全相同的位置。

如果您使用reset file，那么该位置应该相同。至少在理论上。

根据我的经验，当有些元素以交互方式改变它们的大小时，避免布局“惊喜”的最好方法是不使用盒子模型进行定位，并将所有内容“围绕元素改变其大小”绝对定位。

在你的情况下，我会使tds位置相对，并且其中的所有内容都绝对定位：

制作tds position:relative
从css类float:left中删除#sit-in-corner和边距。通过使其位置绝对并添加top和left来定位。

现在圈出的数字应该是“不受链接的影响”。你可以把你想要的内部表（边距等）放在td里面，但我也会选择position：absolute作为它们。

编辑 - 注意到问题正在发生，因为td对他们内部的事物做出了奇怪的反应，改变了他们的规模。

解决这个问题主要是在td中放入一个div，从td中删除类'dashed-panel'并将它放在div上。此外，使类'虚线面板'成为位置：相对，以及上面的变化。

结果可以在http://jsfiddle.net/BMWZd/30/

中看到

我必须删除所有无关的东西，jsfiddle太慢了（？）html。

我如何定位一个元素，使其像'绝对'和' '相对'定位在同一时间？ - CSS

2 个答案: