私は画像の上に浮いのdivを試してみましたが、私はdiv要素を持つ画像の上にテキストボックス/ボックスを作りたい

My Problem 私は画像の上に浮いのdivを試してみましたが、私はdiv要素を持つ画像の上にテキストボックス/ボックスを作りたい

動作しません、私はすでにこれを試みたが。

私のコードはここに行く：

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コードだけ浮いのdiv、私は画面を試してみました：インラインブロックがまだ動作しません。。

出典

2017-12-30 Reinaldi

フロートにしてみてください： – ram

右/左の位置適用します。絶対に。上と右で調整してください。ex - position：absolute; top：100px; right：100px; –

イメージはページ上の機能を提供していますか？そうでない場合は、CSSの背景イメージに変換する必要があります。 –

絶対配置を使用していますが、コンテンツの配置先を指定していません。 上、左、右、下のを使用してくださいからを調整してください。

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>`

出典

2017-12-30 09:22:59

.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>

出典

2017-12-30 11:34:34

私は画像の上に浮いのdivを試してみましたが、私はdiv要素を持つ画像の上にテキストボックス/ボックスを作りたい

答えて

関連する問題