Position: absolute und Elterngröße?

100

Ich habe einige Container und ihre Kinder sind nur absolut / relativ positioniert. Wie stelle ich die Höhe der Container so ein, dass ihre Kinder in ihnen sind?

Hier ist der Code:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Hier ist eine jsfiddle. Ich möchte, dass "Balken" -Text zwischen 4 Quadraten und nicht dahinter angezeigt wird.

http://jsfiddle.net/Ht9Qy/

Irgendwelche einfachen Lösungen?

Beachten Sie, dass ich die Größe dieser Kinder nicht kenne und die Höhe nicht festlegen kann: xxx für Container.

Wordpressor
quelle

Antworten:

86

Wenn ich verstehe, was Sie richtig machen wollen, denke ich nicht, dass dies mit CSS möglich ist, während die Kinder absolut positioniert bleiben.

Absolut positionierte Elemente werden vollständig aus dem Dokumentenfluss entfernt, und daher können ihre Abmessungen die Abmessungen ihrer Eltern nicht ändern.

Wenn Sie diesen Effekt wirklich erzielen mussten, während Sie die untergeordneten Elemente beibehalten position: absolute, können Sie dies mit JavaScript tun, indem Sie die Höhe der absolut positionierten untergeordneten Elemente nach dem Rendern ermitteln und damit die Höhe des übergeordneten Elements festlegen.

Alternativ können Sie einfach float: left/ float:rightund Ränder verwenden, um den gleichen Positionierungseffekt zu erzielen, während die overflow: hiddenuntergeordneten Elemente im Dokumentfluss bleiben. Anschließend können Sie das übergeordnete Element (oder eine andere Clearfix-Technik) verwenden, um die Höhe auf die untergeordneten Elemente zu erhöhen.

article {
    position: relative;
    overflow: hidden;
}

.one {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}
Tom Davies
quelle
Für alle, die hier stolpern und versuchen herauszufinden, warum Ihr Rand-links: -16px & Überlauf: versteckter Trick nicht funktioniert. Ich habe nicht berücksichtigt, dass ich auch die richtige Polsterung hatte, also brauchte ich Rand-rechts: -16px. Auch ich habe Breite verwendet: 100vw für den Container, keine Ahnung, wenn nötig.
TeemuK
24

Hier ist meine Problemumgehung:
In Ihrem Beispiel können Sie ein drittes Element mit "gleichen Stilen" von .one & .two-Elementen hinzufügen, jedoch ohne die absolute Position und mit versteckter Sichtbarkeit:

HTML

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
}
Az.Youness
quelle
6
Was für eine geniale Idee!
Oh Chin Boon
Coole Problemumgehung, ich wollte fast ein Skript schreiben. Danke dir.
JoSch
4

Dies ist eine späte Antwort, aber beim Betrachten des Quellcodes habe ich festgestellt, dass beim Vollbild des Videos die Klasse "mejs-container-fullscreen" zum Element "mejs-container" hinzugefügt wird. Es ist somit möglich, das Styling basierend auf dieser Klasse zu ändern.

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

Wenn Sie Ihr MediaElement-Video mithilfe von CSS flüssig machen möchten, finden Sie unten einen großartigen Trick von Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Fügen Sie dies einfach Ihrem CSS hinzu:

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

Ich hoffe, es hilft.

user3517189
quelle
0

Diese Art von Layoutproblemen kann jetzt mit der Flexbox gelöst werden, ohne dass Höhen bekannt sein oder das Layout mit absoluter Positionierung oder Schwimmern gesteuert werden müssen. Die Hauptfrage von OP war, wie ein Elternteil Kinder unbekannter Größe aufnehmen kann, und sie wollten dies innerhalb eines bestimmten Layouts tun. Wenn Sie die Höhe des übergeordneten Containers auf "fit-content" setzen, wird dies ausgeführt. Die Verwendung von "display: flex" und "rechtfertigen Inhalt: Leerzeichen zwischen" erzeugt das Abschnitts- / Spaltenlayout, von dem ich glaube, dass das OP versucht hat, es zu erstellen.

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

Ich habe die Geige des OP geändert: http://jsfiddle.net/taL4s9fj/

CSS-Tricks auf Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Colin Dodgson
quelle
-17

Dies ist eine weitere späte Antwort, aber ich habe eine ziemlich einfache Möglichkeit gefunden, den "Balken" -Text zwischen den vier Quadraten zu platzieren. Hier sind die Änderungen, die ich vorgenommen habe; Im Balkenbereich habe ich den "Balken" -Text in ein Center- und ein Div-Tag eingeschlossen.

<header><center><div class="bar">bar</div></center></header>

Und im CSS-Bereich habe ich eine "Bar" -Klasse erstellt, die im obigen div-Tag verwendet wird. Nach dem Hinzufügen wurde der Balkentext zwischen den vier farbigen Blöcken zentriert.

.bar{
    position: relative;
}
CESARVALLES
quelle
20
Verwenden Sie nicht <center>! Es ist veraltet.
Ian Devlin
20
... seit HTML4 (AD 1997)
frzsombor