Wie mache ich CSS berücksichtigen eine Sidebar mit absoluter Positionierung

Ich habe eine harte Zeit beim Versuch, CSS zu lernen. Ich kann anscheinend nicht herausfinden, wie man das relativ positionierte Div den absolut positionierten Div-Text berücksichtigt.Wie mache ich CSS berücksichtigen eine Sidebar mit absoluter Positionierung

Dies ist mein Code:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.relative { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 100%; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.absolute { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 1; 
 
    width: 100px; 
 
    height: 100%; 
 
    border-right: 3px solid #73AD21; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<center> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
</center> 
 

 
</body> 
 
</html>

Wie kann ich es so machen, dass die Leitungen bis zum Ende des Textes in der Seitenleiste erweitern?

Dank

Quelle

2016-10-28 Paul de Koning

Lange Rede kurzer Sinn, Sie können nicht. div mit 'position: absolute' hat keinen physikalischen Einfluss auf die Elternbreite und -höhe - daher überläuft es. Eine mögliche Lösung wäre stattdessen "flexbox" oder "float" zu verwenden. –

Sie meinen, Sie wollen, dass es die gleiche Höhe erreicht? Das ist nicht möglich; Bei der absoluten Positionierung wird ein Element aus dem normalen Layoutfluss entfernt, sodass die Höhe des übergeordneten Elements nicht mehr beeinflusst werden kann. Sie haben es versäumt zu erwähnen, was Sie hier eigentlich erreichen wollen - aber von dem, was Sie bisher gezeigt haben, sieht es nicht so aus, als ob absolute Positionierung notwendig oder sogar sinnvoll wäre. Sie erhalten das gewünschte Ergebnis (?), Wenn Sie das innere div schweben, anstatt es zu positionieren. (Das allein wird nicht das äußere div umfassen das innere - gehen Forschung "enthält floats" in dieser Hinsicht.) – CBroe

Verwenden Sie "Höhe" in Bezug auf 'px' Einheit für' relative' Element. –

Genau wie die Kommentare erwähnt, es in der Tat nicht möglich ist, für das übergeordnete Element der Höhe anzupassen, um das Kind zu enthalten, wenn das Kind absolut positioniert ist.

Wenn die relative und absolute Positionierung kein Muss ist, können Sie diesen Effekt mit float oder flexbox erreichen.

Float-Verfahren:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.relative { 
 
    width: 600px; 
 
    height: 100%; 
 
    border: 3px solid #73AD21; 
 
    overflow: auto; 
 
} 
 

 
div.absolute { 
 
    float: left; 
 
    width: 100px; 
 
    border-right: 3px solid #73AD21; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<center> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
</center> 
 

 
</body> 
 
</html>

Das Flex-Box-Verfahren:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.relative { 
 
    width: 600px; 
 
    height: 100%; 
 
    border: 3px solid #73AD21; 
 
    
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap: nowrap; 
 
    justify-content: flex-end; 
 
} 
 

 
div.absolute { 
 
    width: 100px; 
 
    border-right: 3px solid #73AD21; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<center> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
</center> 
 

 
</body> 
 
</html>

Wenn es braucht andere Elemente auf der Bohrinsel sein Auf der anderen Seite müssen Sie alle in einem anderen Container verpacken.

Quelle

2016-10-29 08:32:23

Ich habe keine Ahnung, wie Sie als beste Antwort hinzufügen, aber das half. Danke vielmals! –

Wie mache ich CSS berücksichtigen eine Sidebar mit absoluter Positionierung

Antwort

Verwandte Themen