重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

CSSで画像を同じ位置に重なり合わせるには？

解決済

  • 質問者：toonie
  • 質問日時：
  • 回答数：4件

お世話になります。
2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。
調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。（添付画像のような現象です）
これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか？
素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。
現時点のHTML/CSSはこんな感じです。

HTML---

<div id="contens">
<div id="top_img_a">
<p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p>
<p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p>
</div>

CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。)

#top_img_a {
width:900px;
margin:0;
padding:0;
position:relative;
top:0px;
}
.img_top {
position:relative;
z-index:1;
top:0;
left:25px;
}
.flame {
position:relative;
z-index:2;
top:-216px;
left:25px;
}

「CSSで画像を同じ位置に重なり合わせるに」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞調べているうちに気が付いたのですが、sectionプロパティもnavプロパティも


＞HTML5のみの対応で、
　きちんと正確に!!。
「sectionプロパティもnavプロパティ」じゃありません。
・section要素、nav要素はHTML5から採用される要素です。
　文書は色々な要素で組み立てていて、それをタグを用いてどの要素かを示します。
　p要素は、それでマークされていれば、囲まれた部分がp要素であることを示します。
・HTML4では、文書構造を示す要素が不足していたため、class名やIDをつけていました。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
・・・top_img_a,img_top,flameというclass名じゃ、おかしいでしょ。そもそも、まったく必要ないのですよ。

　私は原則として、class名にHTML5で登場する要素名を使用しています。それは先でHTML5でページを作成するときに、スムーズに移項できるからですし、本来、HTML4でも望まれる名前だからです。
　ですから、別にHTML4.01だろうが、XHTML1.0だろうが、class名として使うなら問題ありません。
　ただし、HTML4.01であってもXHTML1.0であっても、必ずstrictで作らなきゃダメです。
　もしくはXHTML1.1。なぜなら、HTML4.01の勧告(1999/12)以来、
『著者
・・・【中略】・・・
　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
となっていたはずです。予告どおり、XHTML1.1HTML5では、transotinalな要素、属性は削除されています。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
最後に、検証済みのソースを示しておきます。スタイルシートなしで表示してもよい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
html,body{margin:0;}
div.header,div.section,div.footer,div.footer div.nav{
＿width:720px;margin:0 auto;
＿border:solid 1px silver;
}
div.header{
＿height:200px;
＿margin-bottom:40px;
＿background-color:silver;
＿border-color:silver;
}
div.section{
＿background-color:fuchsia;
＿border-color:fuchsia;
}
div.footer div.nav{
＿position:absolute;top:200px;height:40px;
＿font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
＿line-height:40px;
＿text-align:center;
＿background-color:black;
}
div.footer ul,div.footer ul li{
＿display:block;list-style:none;
＿margin:0;padding:0;
}
div.footer ul li{
＿width:118px;float:left;
＿position:relative;
}
div.footer ul li a{
＿display:block;
＿width:100%;height:100%;
＿text-decoration:none;
＿color:#FFF;
}
div.footer ul li ul{
＿font-size:75%;
＿position:absolute;top:40px;left:0;
＿display:none;
}
div.footer ul li ul li{
＿height:60px;width:140px;
＿background-image:url(../images/dawnmenu_button.gif);
}
div.footer ul li:hover{
＿background-color:rgb(255,160,0);
}
div.footer ul li ul li:hover{
＿background-color:transparent;
}
div.footer ul li ul li a{
＿padding-top:20px;
}
div.footer ul li:hover ul{
＿display:block;
}
div.footer{
＿background-color:yellow;
＿border-color:yellow;
}
div.section p,div.section h2,div.section dl{
＿width:680px;margin:0 auto;
}
div.section p.sample img{
＿display:block;
＿margin:0 auto;padding:5px;
＿background-image:url(images/new_entries_img_flame.gif)
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿</div>
＿<div class="section">
＿＿<h1>サンプル2</h1>
＿＿<div class="section">
＿＿＿<p class="sample"><img src="images/dammy_img02.jpg" width="480" height="360" alt="サンプル画像"></p>
＿＿＿<h2>用意する画像</h2>
＿＿＿<dl>
＿＿＿＿<dt>images/dammy_img02.jpg</dt>
＿＿＿＿<dd>480px巾、360px高さの画像を用意する。</dd>
＿＿＿＿<dt>images/new_entries_img_flame.gif</dt>
＿＿＿＿<dd>内寸480×360pxが透明な枠用画像</dd>
＿＿＿＿<dt>../images/dawnmenu_button.gif</dt>
＿＿＿＿<dd>巾140,高60pxの吹き出し画像</dd>
＿＿＿</dl>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="/">TOP</a></li>
＿＿＿＿<li><a href="./profile">会社情報</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="./profile/index.html">会社概要</a></li>
＿＿＿＿＿＿<li><a href="./profile/office.html">営業所</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="./B">Bボタン</a></li>
＿＿＿＿<li><a href="./C">Cボタン</a></li>
＿＿＿＿<li><a href="./D">Dボタン</a></li>
＿＿＿＿<li><a href="./E">Eボタン</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

いつも詳しく検証用のソースも書いてくださり感謝します。
アドバイスをもとに思う通りに実装することができました。
基本から勉強していこうと思います。
ありがとうございました。

通報する
お礼日時：2012/01/16 19:04

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞そのドロップボタンが今回絶対は位置した２つの画像の下に表示され、隠れてしまいます。



　一番良い解決方法は、
ドロップダウンメニューを作るこのCSSどこが変？ - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7229595.html )
　で示したように、ナビゲーションをページの最後に記述することです。

　ナビゲーションは、HTMLの文書構造上、本文の前にあるのは変です。

　今回のrelative内でabsoluteさせる方法も、本来の方法ではなくあくまで抜け道です。いずれの問題も、「文書構造に従ったHTMLを作成しない」「デザインのためにHTMLを書く」と言うのが、本当の原因なのです。
ドロップダウンメニューを作るこのCSSどこが変？ - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7229595.html )で示した、サンプルソースの<div class="section">内に、先の回答の
<div class="section">
<p class="sample"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" width="480" height="360" alt="サンプル画像" /></p>
<h2>記事の見出し</h2>
<p>段落</p>
</div>
　を入れた場合、問題は起きないはずです。

　最初にHTMLを書くとき、デザインのことは一切考えずに、ひたすら文書構造をマークアップすることに徹して、その後スタイルシートでデザインするという開発方法にするのが良いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
調べているうちに気が付いたのですが、sectionプロパティもnavプロパティもHTML5のみの対応で、現在私が記述しているDOCTYPE宣言のXHTML1.0には非対応みたいですね。
うーん、困りましたね、そうしたらいいのでしょうか。

通報する
お礼日時：2012/01/13 16:11

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　上に重ねる画像を、position:relative;の親コンテナブロック内でposition:absoluteで配置すれば良いですし、後から登場するものなのでz-indexも不要です。


#top_img_a{
width:900px;margin:0;padding:0;margin:0 auto;
position:relative;
}
#top_img_a p{margin:0;paddin:0;}
#top_img_a p.flame{
position:absolute;top:-5px;left:-5px;
}

★まず参考にすべきは仕様書です。
9.3.1 配置体系を選択する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
のrelativeには、
「ボックスの位置はまず通常フローにて計算され（この計算で得られた位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。」

★しかし、もっとも基本的な部分で間違っています。

　HTMLは、あくまで文書構造を示すもので、スタイルシートはそのデザインをするためのものです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　質問文だけでは、それぞれの文書内での構造的意味合いがわからないのですが、示された二つの画像は、文書内ではまったく意味のないもの、あるいは、最初の画像は単なるサンプルかもしれません。

　後者だとするとHTML上は

<div class="section">
<p class="sample"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" width="480" height="360" alt="サンプル画像" /></p>
<h2>記事の見出し</h2>
<p>段落</p>
</div>

とかになるはずです。スタイルシートも画像も読み込まないユーザーエージェントや検索エンジンでも意味がわかるように記述すると言うことです。
★枠の画像は、線幅5pxとして画像サイズ+10pxのものを用意したとします。
　そのうえでスタイルシートで
div.section{width:900px;margin:0 auto;}
p.sample img{
display:block;
margin:0 auto;padding:5px;
background-image:url(images/new_entries_img_flame.gif)
}
　HTMLもCSSも極めてわかりやすく、書くのが簡単になるでしょう。

　そしてなによりも、HTMLがデザインと独立していますから、先でどのようにもデザインを変えることが出来ます。
　ためしに、最初のものをスタイルシートなしで表示したものと比べてみてください。これがまさにHTMLとCSSの役割分担です。

div.section{width:900px;margin:0 auto;}
p.sample img{
display:block;
margin:0 auto;padding:5px;
background-image:url(images/new_entries_img_flame.gif)
}
#top_img_a{
width:900px;margin:0;padding:0;margin:0 auto;
position:relative;
}
#top_img_a p{margin:0;paddin:0;}
#top_img_a p.flame{
position:absolute;top:-5px;left:-5px;
}

<body>
<h1>サンプル1</h1>
<div id="contens">
<div id="top_img_a">
<p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p>
<p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p>
<h2>記事の見出し</h2>
<p>段落</p>
</div>
<h1>サンプル2</h1>
<div class="section">
<p class="sample"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" width="480" height="360" alt="サンプル画像" /></p>
<h2>記事の見出し</h2>
<p>段落</p>
</div>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

いつも詳しく回答くださり本当に感謝致します。一番簡単なposition:relative;の親コンテナブロック内でposition:absoluteしたところ思う通りに配置できました。ありがとうございます。
ひとつ疑問なのですが、その上部のheaderのボタン類にはドロップダウンメニューが<ul><li>によって配置されhover時に表示されるようになっているのですが（その問題に関してもORUKA1951様に回答いただきありがとうございます）そのドロップボタンが今回絶対は位置した２つの画像の下に表示され、隠れてしまいます。ボタン類は画像の上部に表示させたいのですが...この問題の原因はなんでしょうか。
よければ教えてください。

通報する
お礼日時：2012/01/12 23:45

No.1

これでどうですか？


（contents→containerにして、下の文章をcontentsにしてます。）
relative内でabsolute指定していくんだったと思いますが・・
【html】
<div id="container">
<div id="top_img_a">
<p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p>
<p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p>
</div>
<div id="contents">
<p>下の文章</p>
</div>
</div>
【css】
#container{
position:relative;
margin:0 auto;
width:900px;
}
#top_img_a{
width:900px;
height:●px;//高さを入力
position:relative;
}
.img_top {
position:absolute;
z-index:1;
top:0px;
left:25px;
}
.flame {
position:absolute;
z-index:2;
top:0px;
left:25px;
}
#contents{
position:relative;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。ちょっと思うような形になりませんでしたが、感謝致します。

通報する
お礼日時：2012/01/12 23:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報