it-swarm.com.de

absolute Position beeinflusst die Breite?

Ich bin neu in CSS. Ich frage mich, warum sich die Breite des div-Elements ändert, wenn ich die Position des div-Elements in absolut ändere. Versuchte es in Chrome v25.0.1364.172m und IE9, beide haben das gleiche Ergebnis.

Einfaches Beispiel:

<!doctype html/>
<html>
<head>
    <title>test</title>
    <style>
        div {
            position:relative;
            border-width: 1px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>
</html>
14
lee23

Weil absolut positionierte Elemente sich nicht wie Block-Level-Elemente verhalten und nicht wie normaler a<div> hintereinander fließen.

Sie müssen eine Breite und eine Höhe für ein Div festlegen, das absolut positioniert ist, je nachdem, was es enthält.

Ihr absolut positioniertes Element wird relativ zum ersten übergeordneten Element positioniert, in dem es sich befindet. Ein einfaches Beispiel:

Ein einfaches 'gotcha' setzt das übergeordnete Element nicht auf position: relative;

<!-- I'm a parent element -->
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;">

    <!-- I'm a child of the above parent element -->
    <div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;">
         I'm positioned absolutely to my parent. 
    </div>

</div>
24
SMacFadyen

Weil das Element, das Sie als absolute Position angeben, die Breite seines übergeordneten Elements übernimmt und sich nicht als Blockelement verhält.

Wie SMacFadyen sagte, ist die wahrscheinlichste Ursache das Fehlen einer relativen Position im container. Befindet sich der container jedoch in einer relativen Position mit einer geringen Breite und der inner -Inhalt in absoluten Zahlen, wird der Inhalt möglicherweise in mehrere Zeilen aufgeteilt, wenn Sie den inneren Inhalt mit der linken oder rechten Maustaste positionieren. In diesem Szenario möchten Sie die Eigenschaft white-space in nowrap oder eine andere Option ändern, die Ihren Anforderungen besser entspricht.

0
Tiagojdferreira