Q&A
cssのpositionプロパティを使って、divの中にあるp要素を相対的に配置したいときなどがあります。
その場合って、相対的に配置したい要素の次に別の要素があった場合に、本来p要素が配置されていた部分がなかったことになってしまいます。
これを回避する方法ってないのでしょうか？
文章だと意味わからなくなってしまったので、実際のコードを見てください。
html
1<div class="wrap"> 2 <p class="title"> 3 this is title 4 </p> 5 <p class="content"> 6 test 7 </p> 8</div>
css
1div.wrap { 2 position: relative; 3} 4 5p.title { 6 position: absolute; 7 top:0; 8 left:0; 9}
このようにした場合、p.contentって本当はp.titleの下に来てほしいですが、本来p.titleがあった空間がなかったことになってしまって、重なって表示されてしまいます。
これって回避する方法とかあるのでしょうか。
実際のイメージ -> http://jsdo.it/ritukiii/mwfv
回答3件
0
ベストアンサー
もし仮にp.titleを相対的に、その下のp.contentをその下に配置したいということだけでしたらシンプルに解決することができます。
の用に書かれていましたが、
css
1p.title { 2 position: absolute; 3 top:0; 4 left:0; 5}
css
1p.title { 2 position: relative; 3 top:0; 4 left:0; 5}
にすれば大丈夫です。
top:0;やleft:0;などの値はrelativeに対しても効きますし、下の要素はいつものDOMの流れで表示されます！
なので下の要素を潜り込ませたくない場合けど、場所を絶対的？に表示したい場合などはrelativeを使うといいと思いますよ！
ちなみにpositionが持つ値としては
static（初期状態、topとかleftとか指定しても意味が無い）
absolute（絶対配置、relativeを起点としてtop:0;などが効く）
relative（相対配置、absoluteの親になれる。また、top:10px;などすることでその分ずらすことができる（ちょっとざっくりとした説明です。））
fixed（絶対配置。top0とか効く&スクロールしても同じ場所を保つ）
といった感じです！
参考になれば幸いです！
投稿2015/09/04 02:37
総合スコア1869
0
p.title と p.content をラップしてabsoluteで指定すればいいと思います。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6div.wrap { 7 position: relative; 8} 9 10div.titlecontent { 11 position: absolute; 12 top: 0; 13 left: 0; 14} 15</style> 16</head> 17<body> 18<div class="wrap"> 19 <div class="titlecontent"> 20 <p class="title"> 21 this is title 22 </p> 23 <p class="content"> 24 test 25 </p> 26 </div> 27</div> 28</body> 29</html>
投稿2015/09/04 01:15
総合スコア1151
0
こんにちは。
URLで現物を見させていただきました。
確かに重なってますね。
私が思うに、
css
1* { 2 margin: 0; 3 padding: 0; 4 border: 0; 5}
で外側も内側も隙間を消してしまっているのではないでしょうか？
これは必要な設定でしょうか？？
投稿2015/09/04 01:14
総合スコア1844
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。