Wie das Überlappen von DIVs verhindern?

[Vogtei]

Hallo zusammen,

ich bastel gerade in CSS etwas mit SVG Hintergründen herum und habe jetzt das Problem, dass sich mein Footer mit dem DIV der Hintergrund SVGs überlappt, habt ihr eventuell eine Idee, wie ich das lösen könnte?

Mein Problem:



So sollte es sein, der Footer hat seinen festen Platz am Ende der Seite:


Code:

HTML:
<div class="background">
<img id="bg" src="quelldateien/bg.svg">
<img id="left" src="quelldateien/left.svg">
<img id="right" src="quelldateien/right.svg">
</div>

<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Unternehmen</h4>
<ul>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Unser Service</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Kontakt</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Richtlinien</a></li>
<li><a href="#">Versand</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Online Shop</h4>
<ul>
<li><a href="#">Silikone</a></li>
<li><a href="#">Klebstoffe</a></li>
<li><a href="#">Acrylate</a></li>
<li><a href="#">Sonstiges</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Folge Uns</h4>
<div class="social-llinks">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

</div>
</div>

</footer>


CSS:
.background {
position: absolute;
width: 100%;
}

#left {
position: absolute;
width: 15%;
display: block;
padding-top: 700px;
}

#right {
padding-top: 100px;
position: relative;
width: 15%;
display: block;
float: right;
}

#bg {
position: absolute;
width: 100%;
display: block;
}



footer {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.footer {
background-color: #6c757d;
padding: 70px 0;


Schon mal vielen Dank und ein schönes Wochenende!
Grüße Leon

 

[basti1012]

Kannst du das mal online stellen, oder bei Codepen ein Beispiel erstellen , mit den SVG Bildern?
So kann man nur schwer helfen.
Ein Layout mit Flexbox wird da sicherlich auch besser für sein.
Dein absoluten Werte macht es auch nicht einfacher.
Deswegen wäre ein Kompletter Code mit den Originalbilder einfache , oder halt Link zu Seite.

 

[Vogtei]

Kannst du das mal online stellen, oder bei Codepen ein Beispiel erstellen , mit den SVG Bildern?
So kann man nur schwer helfen.
Ein Layout mit Flexbox wird da sicherlich auch besser für sein.
Dein absoluten Werte macht es auch nicht einfacher.
Deswegen wäre ein Kompletter Code mit den Originalbilder einfache , oder halt Link zu Seite.

Hi Basti!
Schon mal vielen Dank für deine Hilfe, ich habe hier ein Codepen erstellt:
https://codepen.io/Vogtei/pen/KKmYJZv

 

[basti1012]

Du hast nav,footer und in de mitte das Background.
Wo sollen die Svg Bilder den hin ?
Einfach zwischen nav und footer ?
Sollen über die Bilder noch andere Sachen rein wie Text und Co?
Weil du die als Background beschrieben hast sollen die immer unter den inhalt sein ?
Die Frage ist auch wie groß ist der Inhalt ,

Eine skizze wie ea aussehen soll währe auch gut , gerade wo die bilder angezeigt werden soll.
Dein Bild in der Navigation geht auch nicht .