0

親divの横にあるボタンでdivを取得しようとしています。このような：

____________
|relative  |
|          |
|          |
|          |_______
|          | fixed |
|          |_______|
|          |
|          |
|__________|

固定 div は、スクロール中に固定する必要がありますが、常に親の横に固定し、親の下または上に固定する必要はありません。

どうすればこれを達成できますか?

4

3 に答える 3

3

あなたの主な問題は、要素position: fixedが常に体に対して相対的であることです。これは、宣言さposition: absoluteれた親要素に対して相対的な を持つ要素とは異なる動作をします。position: relative

したがって、主な問題は、left固定要素に設定すると、親が相対的に配置されていても、body 要素の左端にくっつくことです。しかし、トリックを使用して、left固定要素の宣言をスキップすることができます。

.main {
    /*just for visualisation*/
    width: 300px;
    height: 1500px;
    background: #ccc;
}
.main, .fake-wrapper {
    float: left;
}
.fixed {
    position: fixed;
    top: 50%;
}
<div class="main">
<!-- your content -->
</div>
<div class="fake-wrapper">
    <div class="fixed">
        <a href="/">click!</a>
    </div>
</div>

JSFiddleの例を次に示します。

于 2013-03-15T11:21:13.343 に答える
2

position:fixed2番目のdivに使用

HTML

<div class="main">
    zx
</div>
<div class="fix">
    <button>Click</button>
</div>

CSS

html, body{
    height:100%;
    margin:0
}
.main{
    height:100%;
    width:50%;
    background:grey;
}
.fix{
     position:fixed;
     top:50%;
     border:red solid 2px;
     background:yellow;
     left:50%
}

デモ

于 2013-03-15T10:48:04.457 に答える
0

を探していますがposition: absolute、固定ではありません-親にクラスparentがあり、ボタンにクラスbuttonがある場合、必要なものは次のようになります(ボタンの幅が100pxに固定されていると仮定します):

.parent { position: relative; }
.button { position: absolute; top: 45%; right: -100px; }

ここにフィドルの例があります（デモンストレーションのためにいくつかの幅/高さを追加しました。これらは代わりにコンテンツから取得する必要があります）http://jsfiddle.net/WpnP4/

編集：質問が100％明確ではないことに気付きました-ボタンを特定の要素の隣に置き、画面をスクロールしたいと思ったと思います。position:fixedボタン要素を画面に固定したい場合に使用します。

于 2013-03-15T10:46:44.380 に答える