Z-Index-Frage

[stobi_de]

Morgen!
Habe da eine Frage zu https://www.kaiser-koenig-umzug.de/
Wir haben da auf der Seite das Mädl in dem Kreis - Was kostet ein Umzug.
Wie bekomme ich den Kreis über den folgenden Block gelegt?
Ich weiß noch nicht, ob das sinnvoll ist, aber war gerade so eine Idee (nur für mich erstmal) im Kampf gegen das allgemeine Kisten-Design.

In M4 Projekten habe ich das oft gemacht, aber hier klappt das nicht.

-> na klasse, gerade geschrieben, schon gefunden.
In der Section war ein overflow:hidden drin

Hm, jetzt sehen wir ja, dass das Mädl in der betreffenden Seite oben aus dem Kreis raus schaut, aber unten gerade abgeschnitten ist. Man kann die jetzt zwar rumpositionieren, aber die bleibt unten gerade. Geht ja auch irgendwie nicht anders, denn der Kreis liget ja HINTER dem Mädl.
Die Denksportaufgabe für heute: wie bekomme ich das Mädl unten in Form des Kreises abgeschnitten?
ich habe gerade nur eine Idee: das ganze komplett in Photoshop....

[Tommy Herrmann]

Moin,

spontan fällt mir das das "Box-Offset" auf dieser meiner Seiten ein:

https://www.mobirise-tutorials.com/Lawy ... s/Box.html

... weiß nicht wie es jetzt gemacht ist, vielleicht geht das irgendwie mit eben einem negativen margin-bottom.

[stobi_de]

Das Wissenswerte ist, dass im mbr-fullscreen ein overflow:hidden versteckt ist, wodurch kein Element außerhalb der betreffenden Sektion gelangen kann, auch nicht mit dem margin.

Werde ich dummerweise aber auch in einer Woche wieder vergessen haben.

[Tommy Herrmann]

... also ich sehe da kein "overflow: hidden", wenn ich auf "fullscreen" stelle und das negative "margin" geht auch. Die CSS von Mobirise hat aber immer jede Menge "overflow: hidden" oder "overflow: x-hidden" eingearbeitet, die das aber nie beeinflussen.

Das wird ja immer in eine CSS geworfen, wenn der Programmierer keine Lust hat den Fehler zu suchen

Diesem "image-wrapper" habe ich ein "margin: -450px" gegeben und beide Blöcke stehen auf "Full Screen":

Das ist meine gestern von "Mobirise AI" (künstlicher Intelligenz) neu generierte Webseite (Thema "StartM5"):

https://www.mobirise-tutorials.com/Test ... nerated-2/


Was soll auch die CSS-Anweisung "overflow" mit einem "margin" zu tun haben ??? Overflow ist ein Überlauf, was einen Scroller hervorruft aber keine Positionierung eines Elementes beeinflusst.

[Tommy Herrmann]

Moin Frank,

habe mal heute Morgen einen Versuch mit CSS gemacht - vielleicht hilft Dir das bei Deiner Idee ja schon weiter:

https://www.mobirise-tutorials.com/Test ... #Bild-Rund

Die CSS - hat Google, bei der Suche nach "CSS Kreis", für mich auf einer meiner 15 Jahre alten NOF Seiten gefunden

Code: Alles auswählen

.kreis {
  width: 50%;
  height: auto;
  margin: 0px auto 0px auto;
  border-radius: 50%;
  border: 10px solid #fff;
  box-shadow: 5px 5px 5px #cccccc, -3px -3px #24548b;
  background-image: linear-gradient(blue, yellow);
}
@media (max-width: 767px) {
  .kreis {
    width: 90%;
  }
}
.bild-rund {
  border-radius: 50%;
}

Die Anzeige

Code: Alles auswählen

<div class="kreis">
    <img class="bild-rund" src="https://www.mobirise-tutorials.com/Test-Temp/images/woman.png" alt="Girl">
</div>

Bemerkung: habe ich bisher nicht innerhalb der Mobirise class="image-wrapper" ausprobiert, das sollte aber kein Problem machen.

[Tommy Herrmann]

... ich habe jetzt das Bild nun auch noch über zwei Blöcke mit einem negativen "margin" gelegt:

https://www.mobirise-tutorials.com/Test ... oppelblock

Das funktioniert aber nur vom unteren Block nach oben. Keine Ahnung warum - hat da vielleicht einer eine Idee

Versuche ich das Bild vom oberen in den unteren Block zu verschieben, dann schiebt es sich unter den unteren Block. Egal welchen "z-index" ich versuche zu verwenden.

[Tommy Herrmann]

Frank,

wir haben ja ein wenig im Hersteller Forum kommuniziert und ich will diesen Mobirise-Bug auch hier festhalten.

Man kann also das Bild auch nach unten verschieben, wenn man dem <secrion> Tag einen z-index verpasst, was aber nur als Inline-Anweisung funktioniert:

Code: Alles auswählen

<section style="z-index: 1;" data-bs-version="5.1" class="image1 myzindex" 
group="Images & Videos" data-bg-video="{{bg.type == 'video' && bg.value.url}}" 
mbr-class="{'mbr-fullscreen': fullScreen, 'mbr-parallax-background': bg.parallax}">

Den z-index hatte ich als erstes versucht - das ging aber an keiner Stelle außer jetzt direkt am <section> Tag.

Das ist wohl ein Bug, denn eigentlich müssten doch alle Blöcke einen einheitlichen "z-index" haben


... und dann wieder die Class anpasst:

Code: Alles auswählen

.move {
  margin-bottom: -200px;
}

Eine absolute Position ist nicht notwendig.

Hier meine Beispielseite:

https://www.mobirise-tutorials.com/Tuto ... oppelblock