57

次のように、他の div 要素をラップする div 要素があります。

<div style="overflow:hidden">
    <div id="a"></div>
    <div id="b"></div>
</div>

外側の div のサイズを管理する他の CSS ルールがあります。私の実際のコードでは、div#a を外側の div のちょうど 10 ピクセル下に配置したいと考えています。ただし、外側の div の overflow:hidden によって div#b が引き続き切断されるようにしたいと考えています。

これを達成するための最良の方法は何ですか？

4

3 に答える 3

119

方法 1

これを行う良い方法は、オーバーフローしている要素を に設定しposition:fixed(親のオーバーフローを無視するようにします)、次の手法を使用して親に対して相対的に配置することです。

​.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}

1 つの注意点は、上、右、左、下のいずれのプロパティも固定要素に設定できないことです (それらはすべてデフォルトの「自動」でなければなりません)。位置を少し調整する必要がある場合は、代わりに正/負のマージンを使用して調整できます。

方法 2

私が最近発見したもう 1 つのトリックは、overflow:hidden要素を保持しposition:static、オーバーライド要素を上位の親 (親ではなくoverflow:hidden) に対して相対的に配置することです。そのようです：

http://jsfiddle.net/kv0bLpw8/

于 2014-04-08T04:15:04.633 に答える
2 

#wrapper {
  width: 400px;
  height: 50px;
  position: relative;
  z-index: 1000;
  left: 0px;
  top: 0px;
}

#wrapper #insideDiv {
  width: 400px;
  height: 50px;
  overflow: hidden;
  position: absolute;
  z-index: 2000;
  left: 0px;
  top: 0px;
}

#wrapper #a {
  position: absolute;
  height: 30px;
  width: 100px;
  bottom: -40px;
  z-index: 1000;
  left: 0px;
}
<div id="wrapper">
  <div id="a">AAA</div>
  <div id="insideDiv">
    <div id="b">BBB</div>
  </div>
</div>

于 2012-08-17T21:12:20.073 に答える