web-dev-qa-db-ja.com

オーバーフローの隠されたdivの外の位置絶対divの拡張

数か月間cssを実行していないので、簡単なものを見逃してしまうかもしれませんが、解決策が何であれ、それを理解することができませんでした。ここに問題があります。

これが私のコードの簡略化されたバージョンです：

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

したがって、基本的に、外側のdivラッパーの外側である200pxを左に拡張する内側のdivテストが必要です。問題は私のラッパーがoverflow：hiddenであり、外に出ることを許可しないことです。私が使用しているいくつかのjsプラグインのため、overflow：hiddenを維持する必要があります。

それで、回避策はありますか？ありがとう

htmlcssoverflowcss-position
15
Nazar

唯一のオプションは、そのdivをoverflow:hidden divの外に移動することです。あなたは言うことができませんオーバーフローするこのdiv内のすべてを非表示-この1つのdivを除いて...例外を作りましょう。

階層にもう1つのレイヤーを導入できます。これにより、内側のdivはオーバーフロー非表示になり、外側のdivは非表示になります。次に、その配置された要素を外側のdivに配置します。疑似例は次のとおりです。

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

偶然にoverflow:hiddenを使用して古いdivに配置した場合は、その設定をouter divに移動して、適切に配置できるようにします。

つまり、簡単な答えは、CSSをoverflow:hiddenに変更せずに、またはマークアップを変更せずに、必要なことを実行できるソリューションはありません。

16
Eli Gassert

Piyas Deの拡張：

例

隠されたオーバーフローが

position: relative

その後、それは動作しません

動作しない例

11
Jdahern

次のルールが守られている場合、非表示のオーバーフローは実際には無視できます。

  • オーバーフローした子要素には絶対位置があります
  • オーバーフローが非表示の親は静的な位置にあります
  • 相対配置を持つ2番目の親ラッパーが追加されます

[〜＃〜] html [〜＃〜]

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

[〜＃〜] css [〜＃〜]

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

[〜＃〜] fiddle [〜＃〜]http://jsfiddle.net/vLsmmrz6/

5
Alex

何かのようなもの -

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

あなたの問題を解決するかもしれません。

それが役立つかどうかを参照してください...

3
Piyas De