web-dev-qa-db-ja.com

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

ある個人のdivを別の個人のdivの上にオーバーレイすることについて支援が必要です。

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

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

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

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

htmlcsspositionoverlay
816
tonyf
#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を持つ子要素について学ぶことをお勧めします。

1101
alex

受け入れられたソリューションはうまく機能しますが、IMOにはなぜ機能するかについての説明がありません。以下の例は基本に要約されており、重要なCSSを関連性のないスタイリングCSSから分離しています。おまけとして、CSSポジショニングがどのように機能するかの詳細な説明も含めました。

TLDR;コードのみが必要な場合は、The Resultまでスクロールします。

問題

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

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

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

CSSの位置に必要な知識

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

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

  • top
  • right
  • bottom
  • left

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

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

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

  • position: absolute;
  • position: relative;
  • position: fixed;

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

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

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

この例では、2つの<div>要素がページ上の同じ場所に配置されている場合、<div>Top</div>要素は<div>Bottom</div>要素をカバーします。 <div>Top</div>はHTML構造内の<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>

次に、.wrapperにposition: relativeを指定して、新しい位置コンテキストを作成します。

.wrapper {
  position: relative;
}

この新しい位置コンテキストにより、#infoiを.wrapper内に配置できます。まず、#infoiにposition: 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>

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

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>
265
Brett DeWoody

スタイルz-index:1;およびposition: absolute;のdivを使用することによって、他のdivの上にdivをオーバーレイすることができます。

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

106
Hari Thakur

これが必要なものです：

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>
19
DhavalThakor

これは、CSSに基づく100％の簡単な解決法です。 「秘密」は、wrapper要素で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>
19
Tuco

私はあまり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メニューを右にフロートさせるように設定することもできます。お役に立てれば。

9
Muhammad Ahsan

新しい Grid CSS specははるかに洗練された解決策を提供します。 position: absoluteを使用するとオーバーラップや拡大縮小の問題が発生する可能性がありますが、Gridは汚い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;
}

それでおしまい。 IE用にビルドしていないのであれば、あなたのコードはおそらくうまくいくでしょう。

2
ja0nz