Absolute Position innerhalb der absoluten Position: Absolute positionierte Eltern Block Breite

Hier ist mein Code ... absolute Position innerhalb der absoluten Position ... Wenn ich das div position: relative; dehnen über das Body-Tag wie es Block-Ebene ist, aber wenn es ist gegeben position: absolute;, es sieht aus wie ein Inline-Level-Element ... Ich verstehe nicht warum?Absolute Position innerhalb der absoluten Position: Absolute positionierte Eltern Block Breite

div { 
 
    background: red; 
 
    margin: 0 0 0 50px; 
 
    font-size: 2em; 
 
    position: absolute; 
 
} 
 

 
span { 
 
    background: green; 
 
    color: #fff; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>ssss</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div>Begining <span>NORO</span> some text text text</div> 
 
</body> 
 

 
</html>

Quelle

2017-06-22 Norayr Ghukasyan

Was ist die erwartete Ausgabe? –

_ "Ich verstehe nicht warum?" _ - weil: https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width – CBroe

ich verstehe einfach nicht das Problem ...Ich weiß, dass absolut positionierte Elemente automatisch angezeigt werden: block, also absloute Position innerhalb absoluter Position mach das Elternteil div inline ... warum ??? –

Position absolute shrinkswraps das Element und machen es nicht Raum in dem Dokument normalen Fluss nehmen.

Quelle

2017-06-22 09:14:13 itacode

Vielen Dank ...))) –

Eine schnelle, einfache Suche hat mir diese möglichen Erklärungen:

CSS-Tricks sagen die folgenden (absolute relative fixed positioning how do they differ):

Relative. Diese Art der Positionierung ist wahrscheinlich die verwirrendste und am meisten missbrauchte. Was es wirklich bedeutet, ist "relativ zu sich selbst". Wenn Sie Position festlegen: relativ; auf einem Element, aber keine anderen Positionierungsattribute (oben, links, unten oder rechts), wird es überhaupt keine Auswirkung auf seine Positionierung haben, es wird genau so sein, wie es wäre, wenn Sie es als Position verlassen würden: statisch; Wenn Sie jedoch ein anderes Positionierungsattribut angeben, z. B. top: 10px; wird die Position um 10 Pixel von der Stelle verschoben, an der sie normalerweise liegt. Ich bin mir sicher, dass Sie sich vorstellen können, dass die Fähigkeit, ein Element basierend auf seiner regulären Position zu verschieben, sehr nützlich ist. (...) Es gibt zwei andere Dinge, die passieren, wenn Sie die Position festlegen: relativ; auf ein Element, das Sie beachten sollten. Zum einen wird die Möglichkeit eingeführt, den Z-Index für dieses Element zu verwenden, der nicht wirklich mit statisch positionierten Elementen funktioniert. Auch wenn Sie keinen Z-Index-Wert festlegen, wird dieses Element jetzt über jedem anderen statisch positionierten Element angezeigt. Sie können es nicht bekämpfen, indem Sie einen höheren Z-Index-Wert für ein statisch positioniertes Element festlegen. Die andere Sache, die passiert, ist, dass es den Umfang von absolut positionierten Kindelementen einschränkt. Jedes Element, das ein Kind des relativ positionierten Elements ist, kann absolut innerhalb dieses Blocks positioniert werden. Dies bringt einige mächtige Möglichkeiten, die ich über here sprechen.

Absolut. Dies ist eine sehr leistungsfähige Art der Positionierung, mit der Sie jedes Seitenelement genau an der gewünschten Stelle platzieren können. Sie verwenden die Positionierungsattribute oben, links, unten. und Recht, den Ort festzulegen. Denken Sie daran, dass diese Werte relativ zum nächsten übergeordneten Element mit relativer (oder absoluter) Positionierung sind. Wenn es kein solches Elternelement gibt, wird es bis zum Element selbst zurückgesetzt, was bedeutet, dass es relativ zur Seite selbst platziert wird. Der Kompromiss (und das wichtigste, was man sich merken muss) bezüglich der absoluten Positionierung ist, dass diese Elemente aus dem Fluss der Elemente auf der Seite entfernt werden. Ein Element mit dieser Art der Positionierung wird nicht von anderen Elementen beeinflusst und beeinflusst andere Elemente nicht. Dies ist eine ernst zu nehmende Sache, die jedes Mal berücksichtigt wird, wenn Sie absolute Positionierung verwenden. Eine Überbeanspruchung oder unsachgemäße Verwendung kann die Flexibilität Ihrer Website einschränken.

Wenn bei absolute positioning inside relative positioning suchen, werden Sie die genaue Erklärung, warum das Verhalten/Positionierung der Spanne ändert sich sehen, wenn das übergeordnete Element (in diesem Fall) position: relative bekommt.

Hoffe das hilft Ihnen bei der Klärung des Verhaltens.

Quelle

2017-06-22 09:36:30

Danke Kevin –

Absolute Position innerhalb der absoluten Position: Absolute positionierte Eltern Block Breite

Antwort

Verwandte Themen