Question

我对CSS有点新，并且在相当长一段时间内修补了这个问题并且无法弄明白。我有一个图标来播放我想要固定在右下角的视频。我有这个非常简单的CSS：位置：固定; 底部：16.5％; 右：8.25％;

但是，如果我调整窗口大小并使其变小，则图标将覆盖文本。我希望设置它以便不会发生这种情况，图标将在屏幕外显示。

我尝试了几件事，但似乎没有正确的属性。如果我改用左手，它会按照我想要的方式工作，但我希望图标尽可能地正确，所以我想我需要某种动态的左手位置？这看起来有点过于复杂，我想知道是否有更简单的解决方案。

Answer 1

你可以使用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% }
}

当然，如果需要，可以将960px设置为其他值，这只是为了给出这样的想法：您可以根据屏幕宽度在dinamycally重新定位按钮元素。

如果您需要支持IE 8或更低版本，可以使用respond.js

Answer 2

快速，苛刻的解决方案是将视频设置为比按钮更高的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的元素并不总是具有可检测的位置。

确保固定位置div不包含文本

2 个答案: