HTML CSS überlappen verhindern?

Guten Tag,

ich programmiere ein System in welchem ich oben ein Element habe, jetzt möchte ich bei einem neuen Element dadrunter sagen top:0; und dann soll das neue Element praktisch direkt unter dem anderen beginnen und nicht von ganz oben und das andere überlappen.

Wie kann ich das machen?

Mit freundlichen Grüßen

Answer 1

[MrAmazing2]

Mach

position: relative;

dann können sie sich nicht überlappen.

Woher ich das weiß: Hobby – Programmieren ist mein Hobby & Beruf

Comments

[Juboy6000]

Hi, das Problem dabei ist wieder ich habe eine "haupt ebene", praktisch eine div im Hintergrund die alles ausfüllt, jetzt soll aber das Element auf der Hintergrund Div sein aber gleichzeitig nicht mit der anderen oberen Div nicht überlappen

[MrAmazing2]

@Juboy6000

Ist die "andere obere Div" ebenfalls auf dem Hintergrund positioniert? Oder eine Ebene höher?

<div (die obere div)></div>
<div (hauptebene. position: absolute)>
  <div (das div. position: absolute)></div>
</div>

oder

<div (hauptebene)>
  <div (die obere div. position: absolute)></div>
  <div (das div. position: absolute)></div>
</div>

[Juboy6000]

@MrAmazing2

Die untere Variante.

Beispiel:

    <div class="mainbox">
        <div class="toptitle DIE DIV"> 
            <div class="toptitle_text">Test</div>
        </div>
        <div class="sidemenuANDERE OBERE DIV">


        </div>
    </div>

[MrAmazing2]

@Juboy6000

Dann pack beide in einen Container (der absolut positioniert ist, dadurch kannst du bestimmen wo auf dem Hintergrund es sein soll) und gib ihnen position: relative (dadurch sagst du, dass sie sich nicht überlappen dürfen)

    <div class="mainbox">
      <div class="container"> <-- Position: Absolute
        <div class="toptitle DIE DIV">...</div> <-- Position: Relative
        <div class="sidemenuANDERE OBERE DIV"></div> <-- Position: Relative
     </div>
    </div>

Andere möglichkeit wäre, deinem Div einfach

top: ...px;

oder

left: ...px;

zu geben, damit es den benötigten Abstand zum anderen Div hat. Aber wären dann halt fixe Werte. Oder du benutzt Prozente. Von 0 bis 50% Breite das eine Div, von 50% bis 100% Breite das andere. Ginge auch. Jenachdem, was du willst.

[MrAmazing2]

@MrAmazing2

Also wenn ich mir die Frage so durchlese hört sich das eher nach der ersten Lösung an, das mit dem Container.

Vielleicht ginge es auch ohne Container, jenachdem wie du's brauchst. Sollen die zwei Divs erst ab einer bestimmten Stelle beim Hintergrund sein, vlt. in einem Bereich den du mit left: und top: angibst? -> Container. Sollen sie einfach nur auf dem Hintergrund sein, ohne jeglich Einrückung -> Ohne Container. z.B. einfach so:

    <div class="mainbox">
        <div class="toptitle DIE DIV">...</div> <-- Position: Relative
        <div class="sidemenuANDERE OBERE DIV"></div> <-- Position: Relative
    </div>

[Juboy6000]

@MrAmazing2

Danke, ja also ich denke es währe am besten es mit dem Container zu machen oder mit Grid, ich bin noch am überlegen

Answer 2

[VinceJosh]

margin-top sollte funktionieren. Musst dann nur den Abstand von oben in Pixeln (oder so) angeben.

Woher ich das weiß: Hobby – Beschäftige mich oft mit Computern

Comments

[Juboy6000]

Hi, also sage ich beim unteren Element margin-top:0?
Weil ich keine Maße angeben möchte

[VinceJosh]

@Juboy6000

Geht meines Wissens nach nur mit Maße. Kannst du aber mal testen.

[Juboy6000]

@VinceJosh

Also kann ich nicht sagen das es zwei Elemente sind die sich nicht überlappen dürfen?

Answer 3

[HoiZusammen]

Kann es sein, das du deine Elemente mit

position: absolut ;

positionierst ?

Comments

[Juboy6000]

Genau, das ist richtig.

[HoiZusammen]

@Juboy6000

Vermutlich ist genau das gerade dein Problem ;)

Was willst du überhaupt bauen ?

[Juboy6000]

@HoiZusammen

Mit dem position weiß ich auch nicht genau wie das funktioniert in Verbindung mit anderen Elementen

[HoiZusammen]

@Juboy6000

https://youtu.be/S8ywvtvZan4

viel Spaß :)

[VinceJosh]

@Juboy6000

Werden Elemente nicht automatisch untereinander Positioniert?

Answer 4

[apachy]

Das passiert doch in der Regel von selbst. Blockelemente wie div sind immer untereinander, wenn sie nicht mittels Techniken wie float, flex-box oder css-grids in eine Zeile gezogen werden.

Wenn dort noch Abstände sind, die du nicht haben willst, dann entfernst du die eben, dafür brauchst du aber keine statischen Werte für top oder ähnliches. Sowas nutzt man i.d.R. wenn für z.B. eine Navigation die im Bild bleibt. Will man ein Element dann scrollbar da unter haben nutzt man eben margin oder padding.

Generell wird aber mit deiner Erklärung kaum einer wissen wie dein Code aussieht und was du genau haben möchtest. Vermutlich nutzt du position absolute, obwohl du es nicht brauchst und machst dir damit selbst Probleme.

Woher ich das weiß: Berufserfahrung – Softwareentwickler/Projektleiter seit 2012

Answer 5

[Carag]

Versuchs doch mal mit CSS-Grid da kannst du den ganzen Bildschirm in mehrere Teile unterteilen. Da gibt’s einige gute Tutorials dazu auf YT.

Comments

[Juboy6000]

Hi, das habe ich auch schon gehört. Probiere ich mal aus!