1

私はCSSに少し慣れていないので、かなり長い間これをいじっていましたが、理解できません。右下隅に固定したいビデオを再生するためのアイコンがあります。私はそれを非常に単純なCSSで動作させています: position: fixed; 下: 16.5%; 右: 8.25%;

しかし、ウィンドウのサイズを変更して小さくすると、アイコンがテキストの上に表示されます。これが起こらないように設定したかったのですが、アイコンが画面外に出てしまいました。

いくつか試してみましたが、正しい属性では不可能のようです。代わりに左を使用すると、希望どおりに機能しますが、アイコンをできるだけ右に配置したいので、ある種の動的な左位置が必要になると思いますか? これは少し複雑すぎるようで、もっと簡単な解決策があるかどうか疑問に思っていました。

4

2 に答える 2

1

you could use mediaqueries

#button { position: fixed; bottom: 16.5%; }

/* browser width is less than 960px  */
@media screen and (min-width :0px) {
   #button { left : 961px }
}

/* browser width is at least 960px */
@media screen and (min-width : 960px) {
   #button { right: 8.25% }
}

of course set 960px with other value if needed, it's just to give the idea: you can dinamycally re-position your button element depending on the screen width.

If you need to support IE 8 or lower you could use respond.js

于 2012-07-03T14:01:08.897 に答える
0

手っ取り早い、ハッキーな解決策は、ビデオをボタンのz-indexよりも高いz-indexに設定することです。これにより、少なくともボタンがビデオの上に表示されなくなります。

JSソリューションは次のようになります。

HTML

<body>
    <div id='video'></div>
    <button>click</button>
</body>

CSS

#video { width: 500px; height: 350px; background: #d70; }
button { position: fixed; right: 10%; bottom: 10%; background: #ddd; font-size: 20px; padding: 10px; }

JS（jQuery経由）

$(function () {

    //cache a few things
    var vid = $('#video'),
        button = $('button'),
        vid_dims = {w: vid.width(), h: vid.height()};

    //on resize, test to see if button is over video
    $(window).on('resize', function() {
        var button_coords = button.offset(),
            vid_coords = vid.offset(),
            positive_hit_test = button_coords.left > vid_coords.left && button_coords.left <  vid_coords.left + vid_dims.w && button_coords.top > vid_coords.top && button_coords.top <  vid_coords.top + vid_dims.h;

            //show or hide it accordingly
            button.css('visibility', positive_hit_test ? 'hidden' : 'visible'});
    });
});

JSFiddle

ちなみに、ボタンを文字通り非表示にするのではなく、可視性を使用していることに注意してdisplay: noneください。要素が常に検出可能な位置にあるとは限らないためです。

于 2012-07-03T14:17:38.483 に答える