絶対的な位置付けの問題

Question

自分のサイトにCSSを書き込んでjQueryモバイルでうまく表示できるようにしようとしていますが、いくつかの要素の位置を変更する際に問題があります。

通常のサイトでは、ロゴは<h1>要素の前に表示されます。しかし、モバイルサイトでは、自分の<h1>をロゴが絶対位置の下にあるように見えるように設定しました。これは、モバイル画面の2行目に表示されるより長い<h1>のページに来るまでうまく動作します。これによりヘッダdivが展開されますが、ロゴはdivになりません。たぶん私はこれについて間違っているつもりですが、私は本当にこれを解決する方法がわかりません。

ここjsFiddle例です：http://jsfiddle.net/fvJQL/

HTML：

<div id="logo"> 
<img id="logo-img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/120px-Littlebluedog.svg.png" alt="dog"> 
</div> 

<h1 id="header-text">All About Dogs All About DogsAll About DogsAll About DogsAll About DogsAll About DogsAll About Dogs</h1> 

CSS：

#header-text { 
    position: absolute; 
    top: 0; 
    left: 0; 
    text-align: center; 
    padding: 10px; 
    border: 1px solid #000; 
    width: 100%; 
} 

#logo { 
    width: 100%; 
    height: 100px; 
    text-align: center; 
    margin-top: 40px; 
} 

Answer 1

はあなたが<h1>下のロゴを入れ、通常のサイトのためにそれを配置し、せみましたそれは携帯電話の下に落ちる？その後、モバイル用のposition:absolute:を削除して、通常どおりに落とすことができます。

Answer 2

絶対配置を使用すると、H1は他の要素とは独立して動作します。

テキストをイメージの上に置くだけで、テキストが2行目に移動すると他の要素が下に移動します。

マークアップ

<h1 id="header-text">All About Dogs All About All About Dogs All AboutAll About Dogs All AboutAll About Dogs All About</h1> 
<div id="logo"> 
    <img id="logo-img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Littlebluedog.svg/120px-Littlebluedog.svg.png" alt="dog"> 
</div> 

CSS

#header-text { 
margin:0; 
display:block; 
text-align: center; 
padding: 10px; 
border: 1px solid #000; 
width: 100%; 
} 

#logo { 
width: 100%; 
height: 100px; 
text-align: center; 
margin-top:0px; 
} 

は、それが保存されてホープ：http://jsfiddle.net/fvJQL/8/