滑动选项卡定位CSS

Sliding Tab Positioning CSS

本文关键字:定位 CSS 选项      更新时间:2023-09-26

我需要帮助来定位Sliding TAB。它确实有效,在我的浏览器上看起来很好。。。但在其他分辨率不同的计算机上查看时。它与另一个选项卡重叠。

这是网站。。链接

这是我的代码。。

CSS**

    .slide {
        position: fixed;
        overflow: hidden;
        width: 300px;
        margin: 1em 0;
        height: 100%;
        float: left;
        top: 230px;
        left: 0px;
        z-index: 999999;
    }
    .slide .inner {
        position: absolute;
        left: -270px;
        top: 0;
        width: 300px;
        color: #333;
        z-index: 999999;
    }
    .scontent {
        float: left;
        width: 251px;
        background: #fff;
        height: 200px;
        padding: 10px;
        z-index: 999999;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid #bbb;
        border-right: none;
    }
    .mybutton {
        display: block;
        cursor: pointer;
        float: left;
        width: 25px;
        height: 147px;
        background: url(images/remotesupporttab.jpg) no-repeat #fff;
        ;
        z-index: 999999;
        -webkit-border-top-right-radius: 7px;
        -webkit-border-bottom-right-radius: 7px;
        -moz-border-radius-topright: 7px;
        -moz-border-radius-bottomright: 7px;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        border: 1px solid #bbb;
        border-left: none;
    }

JS**

    <script type="text/javascript">
    $(document).ready(function() {
      $('#slideleft .mybutton').click(function() {
        var $lefty = $(this).parent();
        $lefty.animate({
          left: parseInt($lefty.css('left'),10) == 0 ?
          -$lefty.outerWidth() + 31 :
          0
        });
      });
    });  
    </script>

看起来,您的"customer_tab"以百分比定位,而另一个选项卡以固定像素(顶部:230px;)