Wie positioniere ich ein Element so, dass es gleichzeitig sowohl "absolut" als auch "relativ" positioniert ist? - CSS

Question

Sie können die Implementierung sehen hier: http://jsfiddle.net/BMWZd/25/

Wenn Sie auf einen der Namen klicken in Box # 1, werden Sie den Kreis in der linken oberen Ecke des Kastens nach oben und unten sehen.

Wie kann ich das stoppen? Während auch, sicherzustellen, dass es in der oberen linken Ecke jedes der Kästchen in allen Browsergrößen angezeigt wird?

So Position: absolute wird es an einem Ort behalten, unabhängig davon, was um ihn herum passiert. Aber es wird nicht genau die gleiche Position (relativ) auf Diff-Browser-Größen.

Aber Position: relativ wird.

Wie bekomme ich das Beste aus beiden Welten?

Answer 1

So position: absolute es an einer Stelle halten, unabhängig davon, was passiert, um es herum. Aber es wird nicht genau die gleiche Position (relativ) auf Diff-Browser-Größen.

Die Position sollte die gleiche sein, wenn Sie eine reset file verwenden. Zumindest in der Theorie. Wenn Elemente ihre Größe interaktiv ändern, ist der beste Weg, "Überraschungen" auf dem Layout zu vermeiden, darin, das Boxmodell nicht für die Positionierung zu verwenden und alles "um das Element herum zu haben, das seine Größe ändert "absolut positioniert.

In Ihrem Fall würde ich die tds Position relativ machen, und alles, was in ihnen absolut positioniert:

• Sprechen Sie die tds position:relative
• die float:left entfernen und die Ränder von CSS-Klasse #sit-in-corner. Positionieren Sie es, indem Sie es absolut positionieren und top und left hinzufügen.

Jetzt sollten die eingekreisten Zahlen "außerhalb des Einflusses" der Links sein. Sie können die internen Tabellen so platzieren, wie Sie wollen (Ränder, etc.) innerhalb der td, aber ich würde auch mit position: absolute für sie gehen.

EDIT - Ich bemerkte, dass das Problem passierte, weil die tds merkwürdig auf die Dinge in ihnen reagierten und ihre Größe änderten.

Dies wurde hauptsächlich dadurch gelöst, dass ein div in den td eingefügt wurde, indem die gestrichelte Linie der Klasse aus dem td entfernt und auf div gesetzt wurde. Außerdem wurde die gestrichelte Linie der Klasse "Position: Relativ" und die Änderungen oben festgelegt.

Die Ergebnisse können in http://jsfiddle.net/BMWZd/30/

zu sehen Ich habe alle fremden Sachen zu entfernen, war jsfiddle zu langsam mit so viel (?) Html.

Answer 2

Ich weiß, dass dies nicht direkt Ihre Frage beantwortet, aber ich denke, es könnte eine bessere Lösung Ansatz sein. Bitte korrigieren Sie mich, falls ich falsch liege.

Ich habe einen Blick auf Ihr Layout und IMHO ist es ein bisschen zu komplex. Ich denke, Sie würden davon profitieren, es zu vereinfachen.

Hier ist ein schnelles Beispiel, das ich gemacht habe. Ehrlich gesagt, ich weiß nicht, ob es Ihren Bedürfnissen entspricht, aber vielleicht wird es in irgendeiner Weise nützlich sein.

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

Die Stile:

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

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