niwadesign

ホームページ制作のネタ発信

CSS講座

[CSS]iPhoneのSafariで背景画像のposition: fixed;が効かない時の対処法

投稿日:

スマホ用のサイトを制作中にiPhoneのSafariで背景画像のposition: fixed;が効かなかったので、それの対処法の備忘録。

01
この「ああああああ」のボックスが上のメインビジュアルの上を移動していって欲しい。
かつメインビジュアルは固定された状態。

02
PCで閲覧した際は問題なく思い通りの動きが実現できている

これがスマホ(iPhone)で見た場合SafariもChromeも一瞬画像の下に「ああああ」のボックスが潜り込んでします。

03
こんな感じで「あああああ」がメインビジュアルの下にいってしまいます。
ただし、スワイプ中にだけ起こって、指を離すとちゃんとメインビジュアルの上に「あああああ」のボックスがきます。

結局なにがダメだったかというと、メインビジュアルのdivにz-indexが指定してなかったことが原因でした。

ダメだったcss

#main_image {
	background-image: url(images/bg1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 500px;
	position: fixed;
	top: 0;
	left: 0;
}

#contents {
	position: relative;
	margin: 500px 0 0;
	background: #fff;
	width: 100%;
	z-index: 2;
	height: 2000px;
}

正しく動いたcss
10行目にz-indexを指定

#main_image {
	background-image: url(images/bg1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 500px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1; //←これを追加した
}

#contents {
	position: relative;
	margin: 500px 0 0;
	background: #fff;
	width: 100%;
	z-index: 2;
	height: 2000px;
}

ちなみにこちらはhtml

<body>
<div id="main_image"></div>
<div id="contents">
	あああああ
</div>
</body>

-CSS講座
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

幅いっぱいのスマホサイトのメニューで1pxのボーダーを追加する方法

基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。 その際1つ1つの要素に対して%(パーセント)指定をするが、1pxのボーダーを要素の間にいれようと思うと、 これがなかなかうまく …

iPhoneのフォームでフォーカスがズームされるのを防ぐ方法

スマホ用のサイトを作っている時にフォームのテキストフィールドやセレクトをタップすると、画面がズームされることはありませんか? そんな時はフォントサイズを16px以上にするとズームされるとこなく、入力す …

iPhone Safariのsubmitボタンのデザインを変更する方法

通常CSSでbackgroundやborder-radiusをかけることによってスタイルを定義することができますが、 iPhoneSafariの場合は最初にリセットする必要があります。 #hdSear …

no image

IE10以降にだけにCSSを適応するハック

最近あまりIE用のCSSハックを使うことが無くなったけど、どうしてもハックする必要がでてきたのでメモ。 @media all and (-ms-high-contrast:none){ .red { …

パーセント(%)指定したボックスにボーダーを指定する方法

最近はスマホサイトの制作も増え、ボックスの幅をパーセント(%)指定することが増えてきました。 その際にボックスにボーダーを追加するとボーダー分幅が広くなりカラム落ちすることがあります。 そんな時は、ボ …