1

I'm a bit new to CSS and was tinkering with this for quite a while and can't figure it out. I have an icon to play a video that I want fixed positioned at the bottom right corner. I have that working with pretty simple CSS: position: fixed; bottom: 16.5%; right: 8.25%;

But, if I resize the window and make it small, the icon will go over text. I was hoping to set it so that this will not happen, the icon will go off-screen.

I've tried a couple things, but it seems not possible with the right attribute. If I use left instead, it will work as I want it, but I want the icon to be as far right as possible so I guess I would need some sort of dynamic left position? This seems a bit overcomplicated and I was wondering if there is an easier solution.

4

2 回答 2

1

你可以使用媒体查询

#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，如果需要，可以设置其他值，这只是为了给出这个想法：您可以根据屏幕宽度动态地重新定位按钮元素。

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

于 2012-07-03T14:01:08.897 回答
0

一个快速、简单的解决方案是将您的视频设置为比按钮更高的 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 回答