web-dev-qa-db-ja.com

絶対位置なしのDivのオーバーレイ

以下は長い説明ですが、解決しようとしている問題を効果的に伝える唯一の方法です...

私は絶対位置を使用せずにdivをオーバーレイしようとしています（やや必死に、そして完全に失敗しました）。この必要性は、Javascriptを介してサイトに配置したPaypalカートに由来します。カートの自然な位置は、Webページの上部マージンに対して困難です（含まれているdivではなく＃wpPayPal、またはこのdivのラッパー ＃メイン）。

スクリプトの作成者は、カートのスタイルシートのカスタマイズを強くお勧めしますが、プレースホルダーdivにカートを挿入できるチュートリアルを見つけました。セクション。しかしながら...

カートのHTMLフォームとそれぞれの中のul要素には、カートのスタイルシートに高さの要件があり、これにより、コンテナdiv＃imageWrapperでラップされたページのメインコンテンツがプッシュされます。許容されるページ。

このサイトの投稿からいくつかのアイデアを集めて#mainに#imageWrapperを配置しようとしましたが、成功しませんでした。 #imageWrapperで絶対配置を試しましたが、これによりフッターが下に浮かんでいます。 #imageWrapperの高さは可変であるため、フッターを高さのある場所に保持したくありません。オーバーラップを防ぐための最小高さがサイトのコンテンツの多くに対してフッターを押し下げすぎてしまうからです。

また、カートフォームのCSSからposition：relativeをプルしようとしましたが、カートはすぐにフロートしてWebページの上部に戻ります。マージン、トップマージンなどは、これを修正しないでください。

次に、position：relativeとz-indexを使用してdivをオーバーレイする article を読みます。これも最初に、z-index：-1を#main（Paypalカートをラップするdiv）に入れて試してみましたが、カートは消えます。サイトのブレッドクラムナビゲーションも#mainでラップされているため、どこに行くのかわかりません。

次に、mainのz-indexを0に設定し、position：relativeをz-index：100の#imageWrapperに適用しました。カートが再び表示されますが、まだ#imageWrapperが押されています。

提案は大歓迎です。私は想像力の広いインターフェイスの人ではなく、Googleの使い方を知っているだけの男なので、解像度を明確に明確にしてくれてありがとう:)また、私は現在、カートの最小高さの要件を持っていますフォームを0に設定し、内部のUL要素をheight：autoに設定します。カート内のアイテムが1つだけの場合、これにより#imageWrapperがページを十分に上に移動できるようになりますが、これは実行可能な長期的なソリューションではありません。

サンプルページ -カートを表示するには、メイン画像の下に表示されるドロップダウンを使用してアイテムを追加します。展開された状態では、＃imageWrapperがそれに対してどのように座っているかがわかります。

問題のあるHTML/CSSの一部を以下に示しました。

<div id="main">
    <div id="wpPayPal">
    </div><!--end wpPayPal-->
    <div id="breadcrumbs">
        <span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> &raquo;</span></span>
    </div> <!--end breadcrumbs -->
</div><!-- end Main -->

<div id="imageWrapper">
    <div id="imageInnerWrapper">
        <div id="featureImage">
            <div class="filename"><h1>~&nbsp;Bryce Canyon Sunrise | Bryce Canyon | Utah&nbsp;~</h1>
            </div><!--end filename-->

等...

#main {
    display: inline;
    position: relative;
    z-index: 0;
}

#imageWrapper {
    clear: both;
    width: 840px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 100;
}

#imageInnerWrapper {
    width: 840px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 100;
}

#featureImage {
    width: 840px;
    margin: 0 auto;
    padding: 0;  
}

#wpPayPal {
    overflow: hidden;
    float: right;
    margin-right: 100px;
    min-width: 365px;
    min-height: 20px;
}

/* Override the default Mini Cart styles */

#wpBody #PPMiniCart form {
    position: relative;
    right: auto;
    width: auto;
    min-height: 0;
}

#wpBody #PPMiniCart form ul {
    height: auto;
}
htmlcsscss-position
28
jivers

シンプルなフィドル：ちょうどCSS

他の人が別の人を投稿しましたが、それは余分な不要なコードがたくさんあり、いくつかのJSは別の投稿が答えを持っていましたが、何かが欠けていました

.over {
  background: rgba(230, 6, 6, .5);
  float: right;
  height: 460px;
  margin-top: -500px;
  margin-right: 159px;
  overflow: visible;
  position: relative;
  width: 560px;
  color: #FFFFFF;
  /* Just for looks*/
  z-index: 1000;
  padding: 20px/* Just for looks*/
}

.over span {
  position: relative;
  /* Just for looks*/
  top: 15px;
  /* Just for looks*/
}

.this {
  width: 560px;
  height: 460px;
  color: #FFFFFF;
  /* Just for looks*/
  padding: 20px;
  /* Just for looks*/
  background-image: url("http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg");
  /* Just for looks*/
}
<div class="this">To BE UNDER</div>
<div class="over"><span>..or not To BE UNDER</span></div>

http://jsfiddle.net/3WDf7/

15
Kay Valle Ganev

動的な高さのブロックのDiv背景は、flexboxを絶対位置なしで使用して実装できます。

/* Every rule not marked by "required" is optional and used only to decorate the example */
.block {
    margin: 10px 50px;
    display: flex; /* required */
    flex-flow: row nowrap; /* required */
}
.block .background,
.block .foreground {
    box-sizing: border-box; /* required */
    width: 100%; /* required */
    flex: none; /* required */
}
.block .background {
    background: #9ff;
    color: #fff;
    padding: 15px;
    font-size: 30px;
}
.block .foreground {
    padding: 15px;
    border: solid 1px;
    margin-left: -100%; /* required */
}
.block .foreground .outside {
    position: absolute;
    top: 5px;
    left: 8px;
}
<div class="block">
    <div class="background">
        Background
    </div>
    <div class="foreground">
        <div>
            <div class="outside">Outside</div> <!-- The "outside" div is also optional -->
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio incidunt perspiciatis sapiente aspernatur repellat delectus atque quae optio nam? Pariatur explicabo laboriosam dolores temporibus molestiae error ipsa sunt molestias doloremque odio nemo iure similique quae exercitationem, adipisci, ullam dicta esse numquam beatae qui velit asperiores. Dolore, quo illum necessitatibus tempora earum nihil cumque corporis aut error eius voluptatibus quia, pariatur.</div>
        </div>
    </div>
</div>

このソリューションは ブラウザの約99％ でサポートされています。

8
Finesse

とった！！！ ：D

純粋なCssソリューション非常に簡単。 Put以下。

#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}

置換 cssにあるもの#mainwith私がしたこと上記。

削除以下：

display: inline;
position: relative;
z-index: 0;

説明：ここでの主なアイデアは、メイン要素をフロートさせて特定の高さにすることです。しかし、それのオーバーフローが見えるようにするにします。コンテンツのオーバーフローは、兄弟のメイン要素には影響しません。

7
Muhammad Umer

グリッドでもこれを行うことができます。

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

.parent div {
 padding: 50px;
 background-color: rgba(0,0,0,0.5);
 grid-row-start: 1;
 grid-column-start: 1;
}
<div class="parent">
  <div class="child1">
  1
  </div>
  <div class="child2">
  2
  </div>
</div>
3
patelarpan

これまでの回答はどれも、PPMiniCartがimageWrapperを押し下げずに展開および縮小できるようにするという要件に実際には役立ちません。

ここでのコツは、wpPayPalの縮小版を保持するのに十分な大きさの固定高さをPPMiniCartに与えることです（40pxで十分-imageWrapper遠すぎる）。

#wpPayPal {
    height:40px;
}

次に、main（wpPayPalを保持するコンテナ）にimageWrapperの値よりも大きいz-indexを与えると、オーバーフローします。

#main {
    z-index: 1;
}
#imageWrapper {
    z-index: 0;
}

imageWrapper z-indexを100種類に設定すると無理になります。上記と同様に0をお勧めします。

また、wpPayPalが拡張する前にPPMiniCartをoverflow: visibleに設定し、縮小する前にそれを削除するには、いくつかのJavasScriptが必要です。幸いなことに Mini Cart JS は、カスタムコールバックを可能にするNiceイベント駆動型APIを公開します。 WebページでjQueryを使用しているので、それを活用しましょう。

Paypal.apps.MiniCart.render({
    parent: 'wpPayPal',
    events: {
        afterShow: function () {
            $("#wpPayPal").css("overflow", "visible");
        },
        onHide: function () {
            $("#wpPayPal").css("overflow", "");
        }
    }
});

afterShowおよびonHideコールバックを慎重に選択することに注意してください。異なるコールバックを試みる場合は、PPMiniCartの前にoverflow: visibleを設定するか、PPMiniCartの前に展開または削除してください契約）PPMiniCartは移行中に「浮き上がり」ます。

最後に、 working fiddle は千語に値します。

2
Anthony Accioly

絶対配置なしで問題のエレガントな解決策を見つけたOR flexboxを使用して浮動小数点数—主な利点は、親の高さを計算するときに両方のdiv高さが尊重されることです。非常に便利です。画像にテキストをオーバーレイする場合：

body {
  font-family: -Apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 500px;
  /*border: 1px solid Lime;*/
}

.card {
  display: flex;
  /*border: 1px solid red;*/
  overflow: hidden;
}

.box {
  position: relative;
  min-width: 100%;
  width: 100%;
  flex-basis: 100%;
  flex-grow: 1;
}

.box--image {
  z-index: 1;
  overflow: hidden;
}

.box--image.box--heightrestricted {
  max-height: 300px;
}

.box--text {
  z-index: 2;
  margin-left: -100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: red;
}

.box--text h3 {
  margin: 0;
  padding: 1rem;
}
<div class="container">

  <button onclick="document.getElementById('imagebox').classList.toggle('box--heightrestricted')">toggle image max-height</button>
  <br>
  <br>

  <div class="card">

    <div id="imagebox" class="box box--image box--heightrestricted">
      <img src="https://placeimg.com/640/640/4" alt="" />
    </div>

    <div class="box box--text">
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.</h3>
    </div>

  </div>

</div>
1
L Daniel Swakman

flexboxを使用して、絶対位置のないタブコンテナを作成することもできます。

/* Flex Overflow */
section {
  display: flex;
  width: 100%;
  overflow: hidden;
}

section article {
  flex: 100% 0 0;
  order: 0;
}

section article:target {
  order: -1;
}

/* UI */
section { background-color: #ecf0f1; }
section article { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecf0f1;
  font-size: 20px;
  min-height: 8em;
  visibility: hidden;
  opacity: 0;
  transition: visibility .5s ease, opacity .5s ease;
}
section article:first-child,
section article:target {
  visibility: visible;
  opacity: 1;
}
section article#zoneA { background-color: #2980b9; }
section article#zoneB { background-color: #16a085; }
section article#zoneC { background-color: #f39c12; }
section article#zoneD { background-color: #8e44ad; }
<ul>
  <li><a href="#zoneA">Zone A</a></li>
  <li><a href="#zoneB">Zone B</a></li>
  <li><a href="#zoneC">Zone C</a></li>
  <li><a href="#zoneD">Zone D</a></li>
</ul>

<section>
  <article id="zoneA">A</article>
  <article id="zoneB">B</article>
  <article id="zoneC">C</article>
  <article id="zoneD">D</article>
</section>
0
NSD