it-swarm.com.de

Position: absolute und übergeordnete Höhe?

Ich habe einige Container und deren Kinder sind nur absolut/relativ positioniert. Wie stelle ich die Containerhöhe so ein, dass die 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 "Balkentext" zwischen 4 Feldern und nicht dahinter angezeigt wird.

http://jsfiddle.net/Ht9Qy/

Irgendwelche einfachen Korrekturen?

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

82
Wordpressor

Wenn ich verstehe, was Sie versuchen, richtig zu machen, 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, sodass ihre Abmessungen die Abmessungen ihrer Eltern nicht ändern können.

Wenn Sie wirklich diesen Effekt erzielen mussten, während die Kinder als position: absolute Beibehalten wurden, können Sie dies mit JavaScript tun, indem Sie die Höhe der absolut positionierten Kinder nach dem Rendern ermitteln und diese verwenden um die Höhe des Elternteils einzustellen.

Verwenden Sie alternativ einfach float: left/float:right Und Ränder, um den gleichen Positionierungseffekt zu erzielen, während die untergeordneten Elemente im Dokumentenfluss bleiben. Sie können dann overflow: hidden Für das übergeordnete Element (oder jedes andere Element) verwenden andere Clearfix-Technik), um seine Höhe auf die seiner Kinder auszudehnen.

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;
}
78
Tom Davies

Hier ist meine Problemumgehung:
In Ihrem Beispiel können Sie ein drittes Element mit "denselben Stilen" von einem & zwei 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;
}
14
BBeta

Dies ist eine späte Antwort, aber als ich mir den Quellcode ansah, bemerkte ich, dass beim Vollbild des Videos die Klasse "mejs-container-fullscreen" zum Element "mejs-container" hinzugefügt wird. Es ist daher 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 nachfolgend einen großartigen Trick von Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Fügen Sie dies einfach zu 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.

3
user3517189

Diese Art von Layoutproblem kann jetzt mit flexbox) gelöst werden, ohne dass Höhen oder Steuerungslayouts mit absoluter Positionierung oder Schwebungen bekannt sein müssen. Die Hauptfrage von OP war, wie ein Elternteil dazu gebracht werden kann, Kinder von aufzunehmen Die Höhe des übergeordneten Containers sollte auf "Inhalt anpassen" festgelegt werden. Wenn Sie "display: flex" und "justify-content: space-between" verwenden, wird der Abschnitt/die Spalte erstellt Layout Ich denke, das OP hat versucht 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 für die Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
Colin Dodgson