8

私の質問はこの質問に関連しています：

CSS を使用して親要素の上に子要素を表示する

その質問に対する回答である setoverflow: visibleは、1 つの子の 1 つの親に対してのみ機能します。ただし、これらの要素の行があります。親の上に子を表示する必要がある親の行。元の親の上に子を表示することはできますが、親の兄弟の上に子を表示することはできません。私が話していることのアイデアを提供するために、ここにスクリーンショットがあります：

スクリーンショット

私が望むのは、次の 2 つの行の後ろに隠れている要素であるオプション ポップアップが、直接の親の上に表示されるのと同じように、これらの 2 つの行の上に表示されることです。私はそれをいじっていて、それを理解していないので、ここにいる誰かが助けてくれることを願っています.

基本的な構造は次のとおりです。

.row,
.selector {
  position: relative;
}

.label,
.selector {
  display: inline-block;
}

.selector {
  overflow: visible;
}

.selector-inner {
  display: block;
}

.selector-arrow {
  float: right;
  width: 21px;
  height: 21px;
  background: url(arrow.png) no-repeat center center;
}

.selector-caption {
  display: inline-block;
}

.options-popup {
  position: absolute;
  z-index: 100;
  top: 0px;
  right: 0px;
}

.options-item {
  /* only for fonts and sizes */
}
<div class="row">
  <div class="label">Color Scheme:</div>
  <div class="selector">
    <div class="selector-inner">
      <div class="selector-arrow"></div>
      <div class="selector-caption">Standard</div>
    </div>
    <div class="options-popup">
      <div class="options-item">Standard</div>
      <div class="options-item">Dark</div>
      <div class="options-item">Light</div>
    </div>
  </div>
</div>

オプションポップアップを他のすべての要素の上に表示するには、CSS に何ができますか? HTML に対して何かする必要がありますか?

4

1 に答える 1

14

position: relative要素の新しい配置コンテキストを作成します。この要素の子要素は、このローカル コンテキストに配置されます。彼らはこの文脈から離れることはできません。親要素の兄弟の上に子要素を配置する場合は、z-index親要素を兄弟よりも高い値に設定する必要がz-indexあります。

z-index兄弟に対する要素の効果的な位置が DOM ツリーの順序のみに依存する場合、(意味的に適切な場合) DOM ツリー内のすべての兄弟の後に配置するように要素を移動することも役立ちます。

JavaScript を介していつでも動的に変更できることに注意してくださいz-index(控えめな JS に関しては、JS が無効になっている場合にコンテンツが非表示にならないように、合理的な純粋な CSS の代替手段を提供することを忘れないでください)。

于 2012-06-24T22:29:19.693 に答える