【问题标题】:Sliding Tab Positioning CSS滑动标签定位 CSS
【发布时间】:2013-07-30 16:48:40
【问题描述】:

我在定位滑动标签时需要帮助。它在我的浏览器上确实有效并且看起来不错......但是当在其他分辨率不同的计算机上查看时。它与另一个选项卡重叠。

这里是网站..LINK

这是我的代码..

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>

【问题讨论】:

    标签: javascript jquery css cross-browser


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 2016-11-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-04-26
      • 1970-01-01
      • 1970-01-01
      • 2012-03-20
      相关资源
      最近更新 更多