質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • HTML

    12572questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    8353questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

z-indexとfloatの浮き

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 455

omyu

score 11

z-indexを例えば10に指定すると、その要素はfloatと同じく浮いていることになるのでしょうか。
浮いているとしたら、floatと同じようにclearプロパティやclearfixの技法で直すことはできるのでしょうか。
ある要素にposition:fixedとz-index:10を指定すると、その下の要素が上の要素に潜り込み重なってしまいます。下の要素のmargin-topを75pxに指定してレイアウトを整える以外に解決法はあるのでしょうか。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-left">
                <img src="images/isaralogo.png" alt="isara" class="header-logo">
                <p class="h1">バンコクのノマドエンジニア育成講座</p>
            </div>
            <div class="header-right">
                <a href="#">お問い合わせ / 資料請求はこちら</a>
            </div>
        </div>
    </header>
    <div id="wrap">
        <section class="top">
            <p class="text1">プログラミングで</p>
            <p class="text1">人生の安定を手にいれよう</p>
            <img src="images/isaralogolarge.png" alt="isara">
            <p class="text2">バンコクのノマドエンジニア育成講座</p>
            <p class="text2">iSara[イサラ]</p>
        </section>

    </div>
</body>
</html>
@charset "utf-8";

* {
    box-sizing: border-box;
    text-decoration: none;
}
body {
    margin:0;
}
header {
    height:75px;
    width:100%;
    background-color:white;
    position:fixed;
    top:0px;
}
header:after {
    content:"";
    display:block;
    clear:both;
}
.container {
    width:1170px;
    height:75px;
    margin:0 auto;
}
.header-left {
    float:left;
    width:400px;
    height:75px;
}
.header-logo {
    margin-top:17px;
    width:120px;
    float:left;
}
.header-left .h1 {
    margin: 37px 0 0 0;
    font-size: 14px;
    color: #333333;
    font-weight:600;
    letter-spacing: 2px;
}
.header-right {
    float:right;
    width:320px;
    height:45px;
    margin-top:15px;
    background-color: #da6b64;
    border-radius:25px;
}
.header-right a {
    line-height: 45px;
    font-weight:300;
    font-size: 14px;
    text-align:center;
    color:white;
    letter-spacing: 2px;
    display:block;
}
.header-right:hover {
    background-color:#dc143c;
}
#wrap {
    margin-top:75px;
}
.top {
    width:1170px;
    margin:0 auto;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • omyu

    2019/03/06 22:01

    margin以外でということです。わかりにくくて申し訳ありません。

    キャンセル

  • yoshinavi

    2019/03/07 14:10

    「ある要素」等、ぼやかした言い方はこの質問の場合、意図をわかりにくくしています。要素名を明示した方が理解しやすいです。

    キャンセル

  • omyu

    2019/03/07 16:31

    ご指摘ありがとうございます!

    キャンセル

回答 4

+1

質問者さんご自身が記載いただいている通り、
下の要素、ないし、bodyに対して、
fixedを効かせている要素の高さ分、
margin-topかpadding-topをきかせるしかありません。
(といっても、bodyに効かせるのは、CSSの運用上、メンテナンスなどの面から考えやらない方がいい)

paddingかmarginどちらを使うのがいいかに関しては、その時々の状況によって、変わってきます。
今回のケースでは、どちらでもいいと思います。

-------- 以下元回答 --------

なりません。

z-indexは、確かに重なり順を指定するプロパティですが、
最終的に浮かせた状態にするには、
position: absolute、もしくは、position: fixed
も効かせる必要があります。
position: static(初期はこの状態)の場合は、一応重なり順自体は効いていますが、
(一部、position: staticのブロックに重なりが効かない古いブラウザがある)
浮きはしません。
他ブロック同様、下に積み上げられる形で、配置されます。

また、floatと違い、clear: bothなどの技法は必要ありませんが、
position: absoluteの場合、
位置の基準としたい、親要素にposition: relativeを効かせる必要があります。
(これがないと、常にbodyの左上が基準位置となる)
position: fixedの場合は、常に、オンスクリーンの左上が位置の基準となります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/06 19:52

    ある要素にposition:fixedとz-index:10をしているとその要素の下の要素が潜り込み、要素同士が重なってしまうのですがどういった解決法があるのでしょうか

    キャンセル

  • 2019/03/06 19:58

    質問にそのことを追加しましょう。(こうしたいという部分)
    とにかく、浮いているを解消したいのであれば、
    position: static;を効かせるで大丈夫ですよ。
    staticを最優先にしたいのであれば、
    position: static !important;
    とすれば最優先になります。

    もし、position: fixed;を適用した上で重ねたくないのであれば、
    別の方法を用いなければなりませんので、
    そのようにご質問の内容を変えなければ、なりません。
    そして、CSSとHTMLの内容も質問内容に記載しなければいけません。
    現状の質問は、z-indexとfloatは同等の効果なのか?との内容ととられてしまいます。

    キャンセル

  • 2019/03/06 20:12

    わかりました。丁寧なご指摘ありがとうございました。

    キャンセル

checkベストアンサー

0

margin-top等が嫌ならば、その分の、div(ブロック要素)等を入れるのもひとつの方法です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/07 16:30

    なるほど!ありがとうございます!

    キャンセル

0

結論からいうとz-indexは対象の要素がpositionのabsolute,fixedの時に有効なので、position:staticに戻してあげればいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/06 19:48

    position:fixedとz-indexを指定している要素にさらにposition:staticを指定するということでしょうか?

    キャンセル

  • 2019/03/06 20:23

    そうですね。どういったタイミングで変更したいのかわからないのですが、他の要素を上にしたいなら他のfixedのz-indexを大きくすればいいし、スクロールに応じてfixedをstaticにしたいということであれば、js等での操作になるかと

    キャンセル

  • 2019/03/06 20:29

    わかりました。ありがとうございます!

    キャンセル

0

position: sticky;がご希望に合うのではないかと思います。
position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/06 22:06

    調べてみます、ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    12572questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    8353questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。