66

問題があるかどうかはわかりませんが、なぜ親/子要素overflow:hiddenでが機能しないのか疑問に思いました。fixed

次に例を示します。

CSSとHTML：

.parent{
  position:fixed;
  overflow:hidden;
  width:300px;
  height:300px;
  background:#555;
}
.children{
  position:fixed;
  top:200px;
  left:200px;
  width:150px;
  height:150px;
  background:#333;
}
<div class="parent">
  <div class="children">
  </div>
</div>

ライブデモ：jsFiddle

4

8 に答える 8

98

CSSclip: rect(top, right, bottom, left);を使用して、固定された位置の要素を親にクリップすることを検討できます。http://jsfiddle.net/lmeurs/jf3t0fmf/のデモを参照してください。

注意して、注意して使用してください！

クリップスタイルは広くサポートされていますが、主な欠点は次のとおりです。

  1. 親の位置は静的または相対的であってはなりません（相対的に配置されたコンテナ内で絶対的に配置された親を使用できます）。
  2. rect座標はパーセンテージをサポートしていませんが、auto値は100%に等しくなります。clip: rect(auto, auto, auto, auto);;
  3. 子要素を持つ可能性は、少なくともIE11とChrome34では制限されています。子要素の位置を相対または絶対に設定したり、スケールのようなCSS3変換を使用したりすることはできません。

詳細については、 http：//tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/を参照してください。

編集：Chromeは、背面の可視性を適用するときに、子要素の配置とCSS3変換をより適切に処理するように見えるので、念のために次を追加しました。

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

メインの子要素に。

また、古い/モバイルブラウザでは完全にはサポートされていないか、追加の作業が必要になる場合があることにも注意してください。bellafuchsia.comのメニューの実装を参照してください。

  1. IE8はメニューをうまく表示しますが、メニューリンクはクリックできません。
  2. IE9は、折り畳みの下にメニューを表示しません。
  3. iOSSafari<5ではメニューがうまく表示されません。
  4. iOS Safari 5+は、スクロール後にクリップされたコンテンツをスクロールで再描画します。
  5. FF（少なくとも13以上）、IE10 +、Chrome、およびChromeforAndroidはうまく機能しているようです。

編集2014-11-02：デモURLが更新されました。

于 2014-05-25T20:36:08.087 に答える
52

固定位置要素はビューポートに対して固定されているため、別の要素ではありません。したがって、ビューポートがそれを遮断していないため、オーバーフローは無関係になります。

position：absoluteの要素の位置と寸法は、それを含むブロックを基準にしていますが、position：fixedの要素の位置と寸法は、常に最初の包含ブロックを基準にしています。これは通常、ビューポートです。ブラウザウィンドウまたは紙のページボックスです。

参照：http ：//www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

于 2012-09-17T16:45:34.883 に答える
40

2016年の更新：

Coderwallに見られるように、新しいスタッキングコンテキストを作成できます。

<div style="transform: translate3d(0,0,0);overflow:hidden">
   <img style="position:fixed; ..." />
</div>

これはhttp://dev.w3.org/csswg/css-transforms/#transform-renderingを参照しています

レイアウトがCSSボックスモデルによって管理されている要素の場合、変換にnone以外の値を指定すると、スタッキングコンテキストと包含ブロックの両方が作成されます。オブジェクトは、固定された子孫の包含ブロックとして機能します。

于 2016-07-08T14:13:23.407 に答える
8

クリップを使用する代わり{border-radius: 0.0001px}に、親要素で使用することもできます。絶対/固定位置の要素だけで機能するわけではありません。

于 2018-06-09T11:43:37.153 に答える
3

固定位置要素のオーバーフローを非表示にする場合、私が見つけた最も簡単なアプローチは、要素をコンテナ要素内に配置し、含まれている要素の代わりにその要素に適用するposition:fixedことです（このために含まれている要素からoverflow:hidden削除する必要がありますposition:fixed動作する）。次に、固定コンテナの内容を期待どおりにクリップする必要があります。

私の場合object-fit:cover、固定位置要素での使用に問題がありました（ページ本体の境界の外側にこぼれていましたoverflow:hidden）。コンテナ上にある固定コンテナ内に配置するとoverflow:hidden、問題が修正されました。

于 2016-12-15T16:40:23.713 に答える
0

流動的なレイアウトでも同様の非常に複雑な問題が発生しました。右の列の幅は固定で、左の列の幅は柔軟です。私の固定コンテナは、フレキシブルカラムと同じ幅である必要があります。これが私の解決策です：

HTML

<div id="wrapper">
    <div id="col1">
    <div id="fixed-outer">
        <div id="fixed-inner">inner</div>
    </div>
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div id="col2">COL2</div>
</div>

CSS

    #wrapper {
    padding-left: 20px;
}

#col1 {
    background-color: grey;
    float: left;
    margin-right: -200px; /* #col2 width */
    width: 100%;
}

#col2 {
    background-color: #ddd;
    float: left;
    height: 400px;
    width: 200px;
}

#fixed-outer {
    background: yellow;
    border-right: 2px solid red;
    height: 30px;
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */
    overflow: hidden;
    padding-right: 200px; /* #col2 width */
    position: fixed;
    width: 100%;
}

#fixed-inner {
    background: orange;
    border-left: 2px solid blue;
    border-top: 2px solid blue;
    height: 30px;
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */
    position: absolute;
    width: 100%;
}

ライブデモ： http： //jsfiddle.net/hWCub/

于 2013-02-18T13:10:42.373 に答える
0

固定位置要素はブラウザウィンドウを基準にして配置されるため、親要素は基本的に無関係です。

親が子をクリップする場所で必要な効果を得るには、代わりに次overflowを使用します：http: //jsfiddle.net/DBHUv/1/position: absolute

于 2012-09-17T16:47:09.923 に答える
0

これは正確な答えではありませんが、ユースケースが理にかなっている場合に問題を回避するための便利なトリックです。受け入れられた答えは正しいです。

単純なハックはz-index、親の相対コンテナを下および/または上の別の非表示要素と組み合わせて使用​​することです。

例

html：

<div class="parent">
  <button class="child">
    Click Me
  </button>
</div>

<div class="sibling">
  <h1>Some Header</h1>
  
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </p>
</div>

css

body {
  margin: 0px;
  padding: 0px;
}

.parent {
  background-color: blue;
  height: 500px;
  padding: 30px;
  position: relative;
  text-align: center;
  z-index: 1;
}

.child {
  padding: 10px;
  position: fixed;
  top: 100px;
}

.sibling {
  background: white;
  min-height: 500px;
  padding: 30px;
  position: relative;
  z-index: 2;
}
于 2022-02-08T19:18:45.787 に答える