CSS position absolute?

beartooth · 24. März 2023

Guten Abend zusammen,

ich habe einen div welcher die Eigenschaft position: absolut hat.

Nachfolgend habe ich ein p-Element, welches sich dann nicht "nach" dem div einreiht, sondern überlappt wird.

Ich habe nun schon einiges ausprobiert, allerdings ohne Ergebnis.

Wie bekomme ich das hin?

Vielen Dank schon mal.

netzgestaltung · 24. März 2023

hi - also das ist eigentlich "ganz normal und richtig" so.

Die Fragen dazu:
warum ist das div absolut positioniert?

Lösungen:

das p auch absolut positionieren
dem p einen abstand nach oben geben
das div anders positionieren
varianten und details

interessant in dem zusammenhang auch siblings-selektoren, zb dem p nur einen abstand geben, wenn es direkt auf ein div folgt (zb: div + p { margin-top:100px; })

beartooth · 24. März 2023

Guten Abend netzgestaltung - schon mal vielen Dank für die Antwort.

Das Script ist ein "Tab-Script" und ich möchte das nur kurz für ein Formular umbauen.

CSS:

* {
 box-sizing: border-box;
}

.container {
 max-width: 50rem;
 width: 100%;
 margin: 0 auto;
}
.tabs {
 position: relative;
 margin: 3rem 0;
 height: 14.75rem;
}
.tabs::before,
.tabs::after {
 content: "";
 display: table;
}
.tabs::after {
 clear: both;
}
.tab {
 float: left;
}
.tab-switch {
 display: none;
}
.tab-label {
 position: relative;
 display: block;
 line-height: 2.75em;
 height: 3em;
 padding: 0 1.618em;
 cursor: pointer;
 top: 0;
 transition: all 0.25s;
}
.tab-label:hover {
 top: -0.25rem;
 transition: top 0.25s;
}
.tab-content {
 position: absolute;
 z-index: 1;
 top: 2.75em;
 left: 0;
 padding: 1.618rem;
 opacity: 0;
 transition: all 0.35s;
}
.tab-switch:checked + .tab-label {
 border-bottom: 0;
 transition: all 0.35s;
 z-index: 1;
 top: -0.0625rem;
}
.tab-switch:checked + label + .tab-content {
 z-index: 2;
 opacity: 1;
 transition: all 0.35s;
}

input[type=text], select, textarea{
 width: 100%;
 padding: 1em;
 margin: 0 0 1em 0;
 border-radius: 4px;
 box-sizing: border-box;
 resize: vertical;
}

input[type=submit] {
 padding: 1em 2em;
 margin: 0 0 1em 0;
 border-radius: 4px;
 box-sizing: border-box;
 resize: vertical;
}

Ich möchte nur nach dem "Tabs" innerhalb von container ein p Element damit ich einen Text habe, welche runter diesen Tabs stehen. Die Höhen des tab-content ändern sich aber mit dem Inhalt.

position absolute & margin-top haben nichts gebracht.

Edit: Ich kanne es drehen und wenden wie ich möchte, irgendwie komme ich nicht so ganz dahinter...

Joshinator · 24. März 2023

Wie @netzgestaltung schon sagte, das ist so beabsichtigt.
Standardmäßig sind alle HTML Elemente "im Flow" vom Dokument, das MDN hat einen Recht guten Guide zum Flow.
Einer der wenigen Wege was aus dem Flow zu nehmen ist position: absolute.
Dadurch "sehen" die anderen Elemente den Div nicht mehr und positionieren sich dann entsprechend.

Entweder kein absolutes Element benutzen, oder die Höhe des absoluten Elements im Flow hinterlegen (z.B durch ein margin-top auf das relative Element, wie netzgestaltung das schon vorschlug).
Die Höhe fest zu hinterlegen funktioniert nur wirklich gut wenn die Höhe statisch ist. Wenn Text umbricht funktioniert das ganze schon nicht mehr.

Ohne den kompletten Code schwer zu sagen, aber ich schätze position: absolute ist der falsche Befehl für deinen Use Case.
Am besten mal funktionierenden Code posten (also HTML mit Dummy-Inhalt & CSS) damit wir genau sehen können was du machen willst.

beartooth · 24. März 2023

Richtig, der Text in den zwei Tabs (HTML Code folgend) ist unterschiedlich lang. Aber so wie ich das verstanden habe ist das nötig, oder etwa nicht?

Edit: CSS ist ja schon weiter oben im Spoiler

HTML:

<!DOCTYPE html>
<html lang="de">
 <head>
  <title>ComputerBase</title>
  <meta charset="utf-8">
  <meta name="robots" charset="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="computerbase.css">
  </head>
 <body>
 
  <div class="container">
   <div class="tabs">
    <div class="tab">
     <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
     <label for="tab-1" class="tab-label">eins</label>
     <div class="tab-content">
    
      <form action="#eins">
       Formular mit 12 Feldern
      </form>
    
     </div>
    </div>
    <div class="tab">
     <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
     <label for="tab-2" class="tab-label">zwei</label>
     <div class="tab-content">
    
      <form action="#zwei">
       Formular mit 8 Feldern
      </form>
    
     </div>
    </div>
   </div>
   <p>Lorem ipsum und so weiter...</p>
  </div>

 </body>
</html>

Joshinator · 25. März 2023

Ouh, jetzt sehe ich das Problem

.tabs und p ist ganz normal im Flow.
aber .tab-content ist absolut Positioniert; daher nicht mehr im Flow
deshalb ist .tab nur so groß wie dein Label (das einzige Element dort im Flow)
deshalb ist .tabs nur so hoch wie deine beiden Labels
kann man gut sehen wenn man height und margin von .tabs entfernt
das height: 14.75rem; funktioniert halt nur in bestimmten Situationen

Das absolute nutzt du sicher nur weil du die opacity animieren willst ohne das Elemente hin & her springen.

Ich würde einfach aufs animieren verzichten und nur das display umstellen, dann brauchst du kein absolute.
Das bekommst du sonst nur mit Javascript hin:

aktuellen Div auf opacity 0 animieren
wenn die opacity bei 0 ist die `display`s der beiden Divs updaten
dann den neuen Div auf von opacity 0 auf 1 animieren

Das ist dann kein Crossfade wie du den grade hast, sondern fade-out -> fade-in.
Aber du musst mit Javascript nur CSS-Klassen zum richtigem Zeitpunkt setzen/entfernen, also recht einfach.

Suche

CSS position absolute?

beartooth

Cadet 4th Year

netzgestaltung

Captain

beartooth

Cadet 4th Year

Joshinator

Commander

beartooth

Cadet 4th Year

Joshinator

Commander

Ähnliche Themen