web-dev-qa-db-ja.com

CSSの位置：配置された要素内に固定

スクロールバーが表示されるようにコンテンツが長すぎる可能性のあるdivを配置しました（overflow:auto set）。これは、ajaxアプリのダイアログボックスとして機能します。ユーザーがdivをスクロールしてもスクロールしないように、右上隅の閉じるボタンを修正したい。

position:fixed; right:0; top:0で試してみましたが、（firefoxの）divではなくページの右上にボタンを配置しました。

すべてのスクロールイベントでjsのoffsetWidth/HeightでハッキングせずにCSSのみを使用してこのボタン配置を行うことは可能ですか？

ps：divの高さと幅は固定値ではなく、コンテンツのサイズとブラウザーウィンドウのサイズに依存します。ユーザーは必要に応じてサイズを変更することもできます。

htmlcssstylesheetpositioning
68
Calmarius

position:fixed;を使用できますが、leftおよびtopを設定しなくてもかまいません。次に、margin-leftを使用して右にプッシュし、希望する正しい位置に配置します。

ここでデモを確認してください： http://jsbin.com/icili5

83
Sotiris

現在選択されているソリューションは、問題を誤解しているようです。

コツは、絶対位置も固定位置も使用しないことです。代わりに、位置が相対に設定されているでdivの外側に閉じるボタンがあり、divのすぐ右側にあるように左フロートがあります。次に、divの上に表示されるように、負の左マージンと正のzインデックスを設定します。

以下に例を示します。

#close
    {
        position: relative;
        float: left;
        margin-top: 50vh;
        margin-left: -100px;
        z-index: 2;
    }

#dialog
    {
        height: 100vh;
        width: 100vw;
        position: relative;
        overflow: scroll;
        float: left;
    }

<body> 
    <div id="dialog">
    ****
    </div>

    <div id="close"> </div>
</body>
14
Joseph

Position:fixedは、BROWSERウィンドウに関する絶対位置を示します。もちろん、そこに行きます。

position:absoluteは親要素を参照するため、<div>ボタンをコンテナの<div>内に配置する場合、意図した場所に配置する必要があります。何かのようなもの

編集：ポイントを持っている@Sotirisのおかげで、position：fixedとmargin-leftを使用して解決することができます。このように： http://jsfiddle.net/NeK4k/

5
Damien Pirsy

私はこれが古い投稿であることを知っていますが、私は同じ質問をしましたが、親divに関連して要素を固定する答えを見つけませんでした。 medium.com のスクロールバーは、ビューポート（kind *）の代わりに親要素に関連するposition: fixed;を設定するための優れた純粋なCSSソリューションです。これは、親divをposition: relative;に設定し、ボタンラッパーにposition: absolute;を設定することで実現します。もちろん、ボタンは次のようにposition: fixed;です。

<div class="wrapper">
  <div class="content">
    Your long content here
  </div>

  <div class="button-wrapper">
    <button class="button">This is your button</button>
  </div>
</div>

<style>
  .wrapper {
    position: relative;
  }

  .button-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
  }

  .button {
    position: fixed;
    top: 0;
    width: 50px;
  }
</style>

実施例

*固定要素はページとともにスクロールしないため、垂直位置はビューポートに対して相対的ですが、水平位置はこのソリューションの親に対して相対的です。

4
Lifehack

どうやら、CSS変換を使用できます

「「transform」プロパティは、要素で新しいローカル座標系を確立します」、

しかし...これはクロスブラウザではなく、Operaのみが正しく動作するようです

2
4esn0k

修正したい要素の親divでposition：stickyを試してください。

詳細はこちら： http://html5-demos.appspot.com/static/css/sticky.html 。 注意：ブラウザのバージョンの互換性を確認します。

1
Lohit Bisen

要素を固定位置（wiewport）で、親の幅に対して相対的にすることにしました。

固定要素をラップして、親の幅を100％にする必要がありました。同時に、ラップされた固定要素と親は、Webサイトのコンテンツを含むページに応じて幅が変化するdivにあります。このアプローチを使用すると、この要素の幅に応じて、コンテンツの同じ距離に常に固定要素を配置できます。私の場合、これは「上へ」ボタンで、常に下から15px、コンテンツから15pxで表示されていました。

https://codepen.io/rafaqf/pen/MNqWKB

<div class="body">
  <div class="content">
    <p>Some content...</p>
    <div class="top-wrapper">
      <a class="top">Top</a>
    </div>
  </div>
</div>

.content {
  width: 600px; /*change this width to play with the top element*/
  background-color: wheat;
  height: 9999px;
  margin: auto;
  padding: 20px;
}
.top-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 9;
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: yellowgreen;
    position: fixed;
    bottom: 20px;
    margin-left: 100px;
    cursor: pointer;
    &:hover {
      opacity: .6;
    }
  }
}
1
agapitocandemor

あなたの閉じるボタンがテキストになる場合、これは私にとって非常にうまく機能します：

#close {
  position: fixed;
  width: 70%; /* the width of the parent */
  text-align: right;
}
#close span {
  cursor: pointer;
}

HTMLは次のようになります：

<div id="close"><span id="x">X</span></div>
0
thatmiddleway