My ProblemIch habe versucht, ein Bild, ein schwebendes div über, funktioniert aber nicht
Ich möchte Textfeld/eine Box über ein Bild mit div machen, ich habe bereits versucht, dies aber warum kann es nicht.
Mein Code hier geht:
HTML/CSS:
.main{
\t position: relative;
\t margin: 8;
}
.main img{
\t position: relative;
\t height: 510px;
\t width: 100%;
}
.main-content{
\t position: absolute;
\t background: white;
\t height: 40px;
\t width: 40px;
}
<!DOCTYPE html>
<html>
<head>
\t <title>PokeMart</title>
\t <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
\t <div class="header">
\t \t <img src="valor.png">
\t \t <h3>PokeMart</h3>
\t \t <h4><a href="#">Login</a></h4>
\t \t <h4><a href="#">Register</a></h4>
\t </div>
\t <div class="main">
\t \t <img src="bg.jpg" />
\t \t <div class="main-content">Text</div>
\t </div>
\t <div class="footer">
\t \t <h5>Pokemart established 2017, powered by Pokemon Company</h5>
\t \t <h5>Copyright © 2017 LL. All Right Reserved.</h5>
\t \t <div class="contact">
\t \t \t <img src="facebook.png" width="25" height="25">
\t \t \t <img src="google.png" width="25" height="25">
\t \t \t <img src="twitter.png" width="25" height="25">
\t \t \t <img src="github.png" width="25" height="25">
\t \t \t <img src="instagram.png" width="25" height="25">
\t \t </div>
\t </div>
</body>
</html>`
CSS-Code nur das schwebende div, ich habe Anzeige versucht: Inline-Block noch nicht funktionieren .
versuchen mit float: links/rechts – ram
Position bewerben: absolute; und justiere sie mit oben und rechts .. für ex - position: absolut, oben: 100px, rechts: 100px; –
Funktioniert das Bild auf der Seite mit einer Funktion? Wenn nicht, sollten Sie es in ein CSS-Hintergrundbild verwandeln. –