How do I position an element so that it acts like both 'absolutely' & 'relatively' positioned at the same time? - CSS

Question

You can see the implementation here: http://jsfiddle.net/BMWZd/25/

When you click on one of the names in Box#1, you will see the circle in the top left corner of the box move up and down.

How do I stop that? While also, making sure that it shows in the top left corner of each of the boxes on all browser sizes?

So position:absolute will keep it in one place regardless of what happens around it. But it won't put it in the exact same position (relatively) on diff browser sizes.

But position:relative will.

How do I get the best of both worlds?

Answer 1

I know this doesn't directly answer your question, however I think it could be a better solution approach. Please correct me if I'm wrong.

I took a glance at your layout and IMHO it is a bit too complex. I think you would benefit from simplifying it.

Here is a quick example I did. Honestly, I don't know if it fits your needs but maybe it will be useful in some way.

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

The styles:

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

The markup:

<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

So position:absolute will keep it in one place regardless of what happens around it. But it won't put it in the exact same position (relatively) on diff browser sizes.

The position should be the same if you where using a reset file . At least in theory.

In my experience, when there are elements that change their size interactively, the best way to avoid "surprises" on the layout is by not using the box model for positioning, and having everything "around the element that changes its size" absolutely positioned.

In your case, I'd make the tds position relative, and everything inside them absolutely positioned:

• Make the tds position:relative
• Remove the float:left and the margins from css class #sit-in-corner . Position it by making it position-absolute and adding top and left .

Now the circled numbers should be "out of the influence" of the links. You can place the internal tables however you want (margins, etc) inside the td, but I'd also go with position: absolute for them.

EDIT - Noticed that the issue was happening because the td's reacted strangely to the things inside them changing their size.

Solved this mainly by putting a div inside the td, removing the class 'dashed-panel' from the td and put it on the div. Also, made the class 'dashed-panel' be position:relative, and the changes above.

The results can be seen in http://jsfiddle.net/BMWZd/30/

I have to remove all the extraneous stuff, jsfiddle was too slow with so much(?) html.