1つのdivを別のdivの上にオーバーレイする方法

958

ある個人divを別の個人の上に重ねる際の支援が必要divです。

私のコードは次のようになります：

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

残念ながら、最初の中に、div#infoiまたはをネストすることはできません。imgdiv.navi

div示されているように、2つの別個のである必要がありますが、div#infoi上div.naviと右端に、の上に中央揃えで配置する方法を知る必要がありdiv.naviます。

— トニーフ
ソース

この質問には当てはまりませんが、あるdivが別のdivの内側にある場合は、内部のdivが完全または部分的にマスクされている可能性があります。代わりoverflow: hiddenに使用overflow: visibleしてください。

— Christophe Roussy、

1241

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

スニペットを展開

で子position: relative要素について学習することをお勧めしposition: absoluteます。

— アレックス
ソース

3

あなたの助けをありがとうアレックスが私が今見つけているのは、ウィンドウのサイズを変更してドラッグして小さくすると、情報画像が親divにとどまらないということです。基本的には、親divと一緒に移動し、画面のサイズが多少変更されていても、ほとんど同じ位置に留まるようにします。

— tonyf 2010年

2

@tonsils：の指示アレックスはあなたに望ましい結果を与える必要がありますので、あなたが記述問題を引き起こして何か他のものがなければなりません。コードのサンプル（HTML + CSS）を提供していただけませんか。

— ErikTöyräSilfverswärd10年

9

absolutely配置された要素は、最も近い明示的に配置された（position:absolute|relative|fixed）親要素を基準にして配置されます。さらに明確にする... jsfiddle.net/p5jkc8gz

— xandercoded '

場合によっては、これを適応させることができます。私の状況では、＃naviをtop：0 left：0にする必要はありませんでした。一般的なケースとして、HTMLコードがある場合、HTMLツリーが解析される限り、コードは配置されます。したがって、おそらくこの場合、その定義は必要ありません。

— Fabricio PH 2014年

403

承認されたソリューションはうまく機能しますが、IMOはそれが機能する理由についての説明がありません。以下の例は基本に要約され、重要なCSSと関連のないスタイルCSSを分離しています。おまけとして、CSSの配置がどのように機能するかの詳細な説明も含めました。

TLDR; コードだけが必要な場合は、「結果」までスクロールします。

問題

2つの個別の兄弟要素があり、目的は2番目の要素（idofを含むinfoi）を配置することです。そのため、前の要素（classof を含む要素）内に表示されますnavi。HTML構造は変更できません。

提案されたソリューション

目的の結果を得るには、2番目の要素を移動または配置します。これを呼び出す#infoiので、最初の要素内に表示されます.navi。具体的には、の#infoi右上隅に配置する必要があり.naviます。

CSSの位置に必要な知識

CSSには、要素を配置するためのいくつかのプロパティがあります。デフォルトでは、すべての要素はposition: staticです。これは、いくつかの例外を除いて、要素がHTML構造内の順序に従って配置されることを意味します。

他のposition値はrelative、absolute、sticky、とfixed。要素positionをこれらの他の値のいずれかに設定することにより、次の4つのプロパティの組み合わせを使用して要素を配置できるようになりました。

top
right
bottom
left

つまり、を設定position: absoluteすることでtop: 100px、要素をページの上から100ピクセルの位置に追加することができます。逆に、bottom: 100px要素を設定すると、要素はページの下部から100ピクセルの位置に配置されます。

ここに多くのCSS初心者が迷子になります -position: absolute参照のフレームがあります。上記の例では、参照のフレームはbody要素です。position: absoluteとtop: 100pxは、要素が要素の上から100ピクセルに配置されることを意味しbodyます。

参照の位置フレーム、または位置コンテキストpositionは、親要素のを以外の値にposition: static設定することによって変更できます。つまり、親要素を指定することで、新しい位置コンテキストを作成できます。

position: relative;
position: absolute;
position: sticky;
position: fixed;

たとえば、<div class="parent">要素が指定されている場合position: relative、すべての子要素は<div class="parent">位置コンテキストとしてを使用します。子要素が与えられた場合position: absoluteとtop: 100px、要素は、上から100個のピクセルを配置することになる<div class="parent">ので、素子<div class="parent">今位置コンテキストです。

注意すべきもう1つの要素は、スタックの順序、または要素がz方向にどのようにスタックされるかです。ここで知っておくべきことは、要素のスタック順序がデフォルトでHTML構造内の順序の逆によって定義されることです。次の例を考えてみます。

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

この例では、2つの<div>要素がページ上の同じ場所に配置されている場合、<div>Top</div>要素は要素を覆い<div>Bottom</div>ます。HTML構造の<div>Top</div>後<div>Bottom</div>に来るので、スタック順序が高くなります。

コードスニペットを表示

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

<div id="bottom">Bottom</div>
<div id="top">Top</div>

スニペットを展開

z-indexまたはorderプロパティを使用してCSSで重ね順を変更できます。

要素の自然なHTML構造は、表示したいtop要素が他の要素の後に来ることを意味するため、この問題ではスタックの順序を無視できます。

それで、手元の問題に戻ります-この問題を解決するために位置コンテキストを使用します。

ソリューション

上で述べたように、私たちの目標は、#infoi要素内に現れるように要素を配置すること.naviです。これを行うには、.naviおよび#infoi要素を新しい要素にラップして<div class="wrapper">、新しい位置コンテキストを作成できるようにします。

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

そして、与えることによって、新しい位置コンテキスト作成します。.wrapperposition: relative

.wrapper {
  position: relative;
}

この新しい位置コンテキストにより、#infoi内に配置できます.wrapper。まず、与える位置に私たちを許可する、で絶対に。#infoiposition: absolute#infoi.wrapper

次に、top: 0およびright: 0を追加して、#infoi要素を右上隅に配置します。#infoi要素は.wrapperその位置コンテキストとして使用しているため、要素の右上にあることに注意して.wrapperください。

#infoi {
  position: absolute;
  top: 0;
  right: 0;
}

はの.wrapperコンテナにすぎないため.navi、の#infoi右上隅.wrapperに配置すると、の右上隅に配置されたようになり.naviます。

これで、の#infoi右上隅に表示され.naviます。

結果

以下の例は基本に要約され、最小限のスタイリングが含まれています。

コードスニペットを表示

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

スニペットを展開

代替（グリッド）ソリューション

CSSグリッドを使用.naviして#infoi要素を右端に配置する代替ソリューションを次に示します。grid可能な限り明確にするために、詳細なプロパティを使用しました。

コードスニペットを表示

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

スニペットを展開

代替（ラッパーなし）ソリューション

HTMLを編集できない場合、つまりラッパー要素を追加できない場合でも、目的の効果を得ることができます。

要素で使用position: absoluteする代わりに、を使用し#infoiますposition: relative。これにより、#infoi要素の下のデフォルトの位置から要素を再配置できます.navi。ではposition: relative、負のtop値を使用してデフォルト位置から上に移動し、を使用してマイナス数ピクセルのleft値を100%使用してleft: calc(100% - 52px)、右側の近くに配置できます。

コードスニペットを表示

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>

スニペットを展開

— ブレット・デウッディ
ソース

29

これが機能する理由を説明するため、これは最も有用なエントリIMOです。

— Bret Weinraub

20

これはおそらく、これまでに見たポジショニングの仕組みの最も良い説明です。簡潔ですが、正しく理解するには十分な深さです。

— マルセル

2

答えの質についても同様です。私が見た最も明確な説明。

— ウェイドハトラー、

2

これは特にcssの初心者にとって素晴らしい回答です

— Ali Ezzat Odeh

2

説明に対する

— 称賛

111

使用することでdiv、スタイルとz-index:1;し、position: absolute;あなたがあなたをオーバーレイすることができdiv、他にdiv。

z-indexdivが「スタック」する順序を決定します。高いz-indexdivは低いdivの前に表示されz-indexます。このプロパティは配置された要素でのみ機能することに注意してください。

— ハリタクル
ソース

5

例を提供できますか？

— Fabricio PH

3

配置された要素に関するメモは重要です。

— Lawrence Dol

この回答は不完全であるため、その理由を説明するための投稿全体が必要です。スタッキングコンテキストを検索します。

— Bojidar Stanchev

39

新しいグリッドCSS仕様は、はるかに洗練されたソリューションを提供します。を使用position: absoluteするとオーバーラップやスケーリングの問題が発生する可能性がありますが、グリッドは汚れたCSSハックからあなたを救います。

最も最小限のグリッドオーバーレイの例：

HTML

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

それでおしまい。Internet Explorer用にビルドしない場合、コードはおそらく機能します。

— ja0nz
ソース

4

これがトップの答えになるはずです。

— インライン

1

優れた答え。選択した回答は再評価する必要があります。

— AbdulG

完璧な解決策

— デニズダキング

24

以下は、CSSに基づく100％の簡単なソリューションに従います。「秘密」はdisplay: inline-block、ラッパー要素で使用することです。vertical-align: bottom画像では、一部のブラウザでは、要素の後に追加することを4PXパディングを克服するためのハックです。

アドバイス：ラッパーの前の要素がインラインの場合、それらはネストされてしまう可能性があります。この場合、コンテナ内で「ラッパーをラップする」ことができますdisplay: block-通常は古くて良いdivです。

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

スニペットを展開

— トゥコ
ソース

20

これはあなたが必要とするものです：

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 0;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 1;
} 


</style>

<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />

  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

スニペットを展開

— ダバルタコール
ソース

9

私はコーダーでもCSSの専門家でもありませんが、私はまだあなたのアイデアを私のWebデザインで使用しています。私も別の解像度を試しました：

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}

<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

スニペットを展開

もちろん、それらの両方の周りにラッパーがあります。ヘッダーdiv内に表示されるメニューdivの位置を左マージンと上部位置で制御できます。必要に応じて、divメニューを右にフロートするように設定することもできます。

— ムハンマドアーサン
ソース

0

これは、別のdivの上に読み込みアイコンを備えたオーバーレイ効果をもたらす簡単な例です。

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

ここで試してください：http : //jsbin.com/fotozolucu/edit?html,css,output

— ニシャド・アップ
ソース