2017-12-30 26 views
0

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 .

+0

versuchen mit float: links/rechts – ram

+0

Position bewerben: absolute; und justiere sie mit oben und rechts .. für ex - position: absolut, oben: 100px, rechts: 100px; –

+0

Funktioniert das Bild auf der Seite mit einer Funktion? Wenn nicht, sollten Sie es in ein CSS-Hintergrundbild verwandeln. –

Antwort

0

Sie verwenden absolute Positionierung, aber nicht, wo der Inhalt platziert werden soll. Versuchen Sie mit oben, links, rechts, unten bis passen Sie die Inhaltsposition.

top:20%; 
right:100px; 

.main { 
 
    position: relative; 
 
    margin: 8; 
 
} 
 

 
.main img { 
 
    position: relative; 
 
    height: 510px; 
 
    width: 100%; 
 
} 
 

 
.main-content { 
 
    position: absolute; 
 
    top: 20%; 
 
    right: 100px; 
 
    background: white; 
 
    height: 40px; 
 
    width: 40px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>PokeMart</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <img src="valor.png"> 
 
    <h3>PokeMart</h3> 
 
    <h4><a href="#">Login</a></h4> 
 
    <h4><a href="#">Register</a></h4> 
 
    </div> 
 
    <div class="main"> 
 
    <img src="http://via.placeholder.com/9000x500" /> 
 
    <div class="main-content">Text</div> 
 
    </div> 
 
    <div class="footer"> 
 
    <h5>Pokemart established 2017, powered by Pokemon Company</h5> 
 
    <h5>Copyright © 2017 LL. All Right Reserved.</h5> 
 
    <div class="contact"> 
 
     <img src="facebook.png" width="25" height="25"> 
 
     <img src="google.png" width="25" height="25"> 
 
     <img src="twitter.png" width="25" height="25"> 
 
     <img src="github.png" width="25" height="25"> 
 
     <img src="instagram.png" width="25" height="25"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>`

0

.wrap { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    max-width: 450px; 
 
} 
 
.wrap img { 
 
    border: 1px solid #000; 
 
    display: block; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 
.wrap .overlay { 
 
    border: 1px solid #000; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
} 
 
.wrap .overlay .box { 
 
    margin: auto; 
 
    background-color: #FFF; 
 
    border: 1px solid #000; 
 
    padding: 40px; 
 
}
<div class="wrap"> 
 
    <img src="http://www.telegraph.co.uk/content/dam/gaming/2017/10/10/Pokemon-Halloween_trans_NvBQzQNjv4BqZPnXlBHEdt8AtjizIYNgmRSlK0RKxqt6w8JJghUtSuI.jpg?imwidth=450"> 
 
    <div class="overlay"> 
 
    <div class="box">box</div> 
 
    </div> 
 
</div>

Verwandte Themen