web-dev-qa-db-de.com

Überlagern von Divs ohne absolute Position

Was folgt, ist eine lange Erklärung, aber es ist der einzige Weg, um das Problem effektiv zu kommunizieren, das ich zu lösen versuche.

Ich versuche (etwas verzweifelt und völlig erfolglos), Divs zu überlagern, ohne absolute Positionierung zu verwenden. Die Notwendigkeit ergibt sich aus einem Paypal-Warenkorb, den ich über ein Javascript auf der Website platziere. Die natürliche Position des Wagens liegt hart am oberen Rand der Webseite (nicht an dem enthaltenden div, der #wpPayPal ist, oder am Wrapper für dieses div: #main).

Der Autor des Skripts empfiehlt dringend, das Stylesheet des Warenkorbs nicht anzupassen. Ich habe jedoch ein von ihm geschriebenes Tutorial gefunden, das das Einfügen des Warenkorbs in einen Platzhalter div mit Anweisungen zum Positionieren des Containers ermöglicht. Ich konnte den Warenkorb unter dem oberen Banner der Website positionieren Sektion. Jedoch...

Das HTML-Formular des Warenkorbs und ein ul-Element in jedem Element haben Höhenanforderungen im Stylesheet des Warenkorbs. Dies drückt den Hauptinhalt der Seite, der vom Container div #imageWrapper umschlossen ist, zu weit nach unten, um akzeptabel zu sein.

Ich habe versucht, #imageWrapper über #main zu positionieren, wobei mehrere Ideen aus Posts auf dieser Site ohne Erfolg stammen. Ich habe die absolute Positionierung auf #imageWrapper ausprobiert, aber dies befreit die Fußzeile, um darunter zu schweben. # imageWrappers Höhe ist variabel, daher möchte ich die Fußzeile nicht mit der Höhe in Position halten, da die Mindesthöhe, um Überlappungen zu vermeiden, die Fußzeile für einen Großteil des Inhalts der Website zu weit nach unten drücken würde.

Ich habe auch versucht, die Position zu ziehen: relativ aus dem CSS des Warenkorbs, aber der Warenkorb wird sofort wieder an den Anfang der Webseite verschoben. Marge, obere Marge usw. können dies nicht beheben.

Ich lese dann einen Artikel on mit position: relative und z-index, um divs zu überlagern. Versucht dies auch zuerst, indem Sie z-index: -1 auf #main (das Div, das den Paypal-Warenkorb einwickelt) setzen, aber der Warenkorb verschwindet. Nicht sicher, wohin es geht, da das Navigationspfad-Navi der Site, das ebenfalls von #main umwickelt ist, nicht entfernt wurde.

Dann setze ich den z-Index für main auf 0 und wende die Position an: relativ zu #imageWrapper mit z-index: 100. Der Warenkorb wurde wieder angezeigt, hält aber #imageWrapper noch immer gedrückt.

Vorschläge werden sehr begrüßt. Ich bin kein Schnittstellenmensch, aber nur ein Typ, der mit Google umzugehen weiß. Danke im Voraus, dass Sie Ihre Auflösung klar formuliert haben. Außerdem habe ich zur Zeit die Mindesthöhe für den Wagen form auf 0 setzen und das UL-Element innerhalb von height: auto. Da sich nur ein einziger Artikel im Warenkorb befindet, kann #imageWrapper die Seite so weit nach oben schieben, dass sie akzeptabel ist. Dies ist jedoch keine langfristige Lösung.

Hier ist eine Beispielseite - Um den Einkaufswagen anzuzeigen, fügen Sie einen Artikel über die Dropdown-Liste hinzu, die unter dem Hauptbild angezeigt wird. Im erweiterten Zustand sehen Sie, wie #imageWrapper dagegen sitzt.

Ich habe im folgenden Teile des anstößigen HTML/CSS eingefügt:

<div id="main">
    <div id="wpPayPal">
    </div><!--end wpPayPal-->
    <div id="breadcrumbs">
        <span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> &raquo;</span></span>
    </div> <!--end breadcrumbs -->
</div><!-- end Main -->

<div id="imageWrapper">
    <div id="imageInnerWrapper">
        <div id="featureImage">
            <div class="filename"><h1>~&nbsp;Bryce Canyon Sunrise | Bryce Canyon | Utah&nbsp;~</h1>
            </div><!--end filename-->

usw...

#main {
    display: inline;
    position: relative;
    z-index: 0;
}

#imageWrapper {
    clear: both;
    width: 840px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 100;
}

#imageInnerWrapper {
    width: 840px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 100;
}

#featureImage {
    width: 840px;
    margin: 0 auto;
    padding: 0;  
}

#wpPayPal {
    overflow: hidden;
    float: right;
    margin-right: 100px;
    min-width: 365px;
    min-height: 20px;
}

/* Override the default Mini Cart styles */

#wpBody #PPMiniCart form {
    position: relative;
    right: auto;
    width: auto;
    min-height: 0;
}

#wpBody #PPMiniCart form ul {
    height: auto;
}
26
jivers

Einfache Geige: Nur CSS 

Ein Typ hat einen anderen gepostet, aber er hatte eine Menge zusätzlichen Code und einige JS. Ein anderer Post hatte die Antwort, aber etwas fehlte

.over {
  background: rgba(230, 6, 6, .5);
  float: right;
  height: 460px;
  margin-top: -500px;
  margin-right: 159px;
  overflow: visible;
  position: relative;
  width: 560px;
  color: #FFFFFF;
  /* Just for looks*/
  z-index: 1000;
  padding: 20px/* Just for looks*/
}

.over span {
  position: relative;
  /* Just for looks*/
  top: 15px;
  /* Just for looks*/
}

.this {
  width: 560px;
  height: 460px;
  color: #FFFFFF;
  /* Just for looks*/
  padding: 20px;
  /* Just for looks*/
  background-image: url("http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg");
  /* Just for looks*/
}
<div class="this">To BE UNDER</div>
<div class="over"><span>..or not To BE UNDER</span></div>

http://jsfiddle.net/3WDf7/

14
Kay Valle Ganev

Ich habs!!! : D

Reine Css-Lösung Sehr einfach. Setzen Sie folgendes.

#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}

Ersetzen Sie, was immer Sie in css #mainhaben, durch, was ich oben gemacht habe.

Also entferne folgendes:

display: inline;
position: relative;
z-index: 0;

Erläuterung: Die Hauptidee hier ist, das Hauptelement zu schweben und es auf bestimmte Höhe zu setzen, sodass es an keiner Stelle alles nach unten drückt. Aber mach Überlauf davon sichtbar. Überlauf des Inhalts wirkt sich nicht auf Geschwister von Hauptelement aus.

6
Muhammad Umer

Der Div-Hintergrund für einen Block mit dynamischer Höhe kann mit der Flexbox ohne absolute Positionierung implementiert werden:

/* Every rule not marked by "required" is optional and used only to decorate the example */
.block {
    margin: 10px 50px;
    display: flex; /* required */
    flex-flow: row nowrap; /* required */
}
.block .background,
.block .foreground {
    box-sizing: border-box; /* required */
    width: 100%; /* required */
    flex: none; /* required */
}
.block .background {
    background: #9ff;
    color: #fff;
    padding: 15px;
    font-size: 30px;
}
.block .foreground {
    padding: 15px;
    border: solid 1px;
    margin-left: -100%; /* required */
}
.block .foreground .outside {
    position: absolute;
    top: 5px;
    left: 8px;
}
<div class="block">
    <div class="background">
        Background
    </div>
    <div class="foreground">
        <div>
            <div class="outside">Outside</div> <!-- The "outside" div is also optional -->
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio incidunt perspiciatis sapiente aspernatur repellat delectus atque quae optio nam? Pariatur explicabo laboriosam dolores temporibus molestiae error ipsa sunt molestias doloremque odio nemo iure similique quae exercitationem, adipisci, ullam dicta esse numquam beatae qui velit asperiores. Dolore, quo illum necessitatibus tempora earum nihil cumque corporis aut error eius voluptatibus quia, pariatur.</div>
        </div>
    </div>
</div>

Die Lösung wird von etwa 97% der Browser unterstützt.

3
Finesse

Keine der vorherigen Antworten hilft tatsächlich bei Ihrer Anforderung, nämlich, dass PPMiniCart erweitert und verkleinert werden kann, ohne imageWrapper nach unten zu drücken.

Der Trick hier ist, wpPayPal eine feste Höhe zu geben, die groß genug ist, um die kontrahierte Version von PPMiniCart zu halten (40px reicht aus - dies gibt dem Einkaufswagen ausreichend Platz, ohne imageWrapperzu weit nach unten zu drücken). 

#wpPayPal {
    height:40px;
}

Dann geben Sie main (dem Container, der wpPayPal enthält) einen z-index, der größer ist als der von imageWrapper, damit er überläuft.

#main {
    z-index: 1;
}
#imageWrapper {
    z-index: 0;
}

Wenn Sie imageWrapper z-index auf 100 Arten von Overdoes setzen, würde ich 0 wie oben empfehlen. 

Sie benötigen auch etwas JavasScript, um overflow: visible auf wpPayPal festzulegen, nachdem PPMiniCart erweitert wurde, und es zu entfernen, bevor es zusammengezogen wird. Glücklicherweise stellt Mini Cart JS eine Nice-ereignisgesteuerte API zur Verfügung, die benutzerdefinierte Rückrufe ermöglicht. Da Sie jQuery auf Ihrer Webseite verwenden, nutzen wir das:

Paypal.apps.MiniCart.render({
    parent: 'wpPayPal',
    events: {
        afterShow: function () {
            $("#wpPayPal").css("overflow", "visible");
        },
        onHide: function () {
            $("#wpPayPal").css("overflow", "");
        }
    }
});

Bitte beachten Sie die sorgfältige Wahl von afterShow und onHide callbacks. Wenn Sie versuchen, dies anders zu tun (Einstellung overflow: visible, bevor PPMiniCart erweitert oder entfernt wird, bevor PPMiniCart Verträge geschlossen werden), PPMiniCart wird während des Übergangs "hochfliegen". 


Schließlich ist eine Geige arbeiten mehr als tausend Worte.

2
Anthony Accioly

das kannst du jetzt auch mit gitter machen.

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

.parent div {
 padding: 50px;
 background-color: rgba(0,0,0,0.5);
 grid-row-start: 1;
 grid-column-start: 1;
}
<div class="parent">
  <div class="child1">
  1
  </div>
  <div class="child2">
  2
  </div>
</div>

1
patelarpan

Eine elegante Lösung für Ihr Problem gefunden, ohne absolute Positionierung OR mithilfe der Flexbox. Der Hauptvorteil besteht darin, dass beide Teilungshöhen bei der Berechnung der Elternhöhe berücksichtigt werden. Sehr nützlich zum Überlagern von Text in einem Bild:

body {
  font-family: -Apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 500px;
  /*border: 1px solid Lime;*/
}

.card {
  display: flex;
  /*border: 1px solid red;*/
  overflow: hidden;
}

.box {
  position: relative;
  min-width: 100%;
  width: 100%;
  flex-basis: 100%;
  flex-grow: 1;
}

.box--image {
  z-index: 1;
  overflow: hidden;
}

.box--image.box--heightrestricted {
  max-height: 300px;
}

.box--text {
  z-index: 2;
  margin-left: -100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: red;
}

.box--text h3 {
  margin: 0;
  padding: 1rem;
}
<div class="container">

  <button onclick="document.getElementById('imagebox').classList.toggle('box--heightrestricted')">toggle image max-height</button>
  <br>
  <br>

  <div class="card">

    <div id="imagebox" class="box box--image box--heightrestricted">
      <img src="https://placeimg.com/640/640/4" alt="" />
    </div>

    <div class="box box--text">
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.</h3>
    </div>

  </div>

</div>

1

Kann mit flexbox auch einen Tab-Container ohne absolute Position erstellen:

/* Flex Overflow */
section {
  display: flex;
  width: 100%;
  overflow: hidden;
}

section article {
  flex: 100% 0 0;
  order: 0;
}

section article:target {
  order: -1;
}

/* UI */
section { background-color: #ecf0f1; }
section article { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecf0f1;
  font-size: 20px;
  min-height: 8em;
  visibility: hidden;
  opacity: 0;
  transition: visibility .5s ease, opacity .5s ease;
}
section article:first-child,
section article:target {
  visibility: visible;
  opacity: 1;
}
section article#zoneA { background-color: #2980b9; }
section article#zoneB { background-color: #16a085; }
section article#zoneC { background-color: #f39c12; }
section article#zoneD { background-color: #8e44ad; }
<ul>
  <li><a href="#zoneA">Zone A</a></li>
  <li><a href="#zoneB">Zone B</a></li>
  <li><a href="#zoneC">Zone C</a></li>
  <li><a href="#zoneD">Zone D</a></li>
</ul>

<section>
  <article id="zoneA">A</article>
  <article id="zoneB">B</article>
  <article id="zoneC">C</article>
  <article id="zoneD">D</article>
</section>

0
NSD