0
私はCSSとHTMLでいくつかの練習をしていますが、ここではこの問題に直面したページのレイアウトを作成しています。 注：コード以下は、私は、レイアウトコンテナの幅をパーセントで表しながら位置を絶対位置として使用してテキストにテキストを配置する方法
<!DOCTYPE html>
<html>
<head>
<style>
*
{margin:0px;padding:0px;box-sizing:border-box;}
#container
{
width:800px;
position:relative;
background-color:darkgray;
}
#temp
{
position: relative;
}
#content
{
position:absolute;
top:100px;
right:120px;
width:200px;
height:200px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="temp">
<img src="psp.jpg" alt="no imgage">
<div id="content">
<h1>
Goku Vs Vegeta
<form>
<input type="text" placeholder="Start fighting" name="img">
</form>
</h1>
</div>
</div>
</div>
</body>
</html>
を作成しながら、上記のコードは、テキストは、我々はテキストがないブラウザのズームを増減するかどうかを正確に画像上の残っている私のために完璧に動作直面する問題のほんの一例ですそれを位置を変える。
コンテナの幅をピクセルからパーセンテージに変更すると問題が発生します。ここでは2番目のコードがあります。
<!DOCTYPE html>
<html>
<head>
<style>
*
{margin:0px;padding:0px;box-sizing:border-box;}
#container
{
width:100%;
position:relative;
background-color:darkgray;
}
#temp
{
position: relative;
}
#content
{
position:absolute;
top:100px;
right:120px;
width:200px;
height:200px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="temp">
<img src="psp.jpg" alt="no imgage">
<div id="content">
<h1>
Goku Vs Vegeta
<form>
<input type="text" placeholder="Start fighting" name="img">
</form>
</h1>
</div>
</div>
</div>
</body>
</html>
第二コードの問題は、我々はブラウザのズームを増減場合は、テキストの位置が変化すると、それはブラウザのまたは容器へのポートを表示するであろうむしろ、画像に対してではありません画像には適用されません。誰かがこの問題を解決する方法を教えてもらえますか？
JSフィドル：H1でhttps://jsfiddle.net/30d2nqeL/
psp.jpg IMGのサイズは？ – Toby
@Tobyのサイズは263 KBと幅：1336の高さ：768 –
そして、それは正確に何を目指しているのですか？私はイメージを見ることができないので、ボックスにどこに行くべきかを明確にする何かがイメージにあるかどうかはわかりません。オンラインで画像にリンクできますか？またはもっと説明してください.. – Toby