CSS位置：已修复无法在Chrome中运行

Question

我编写了一些可以访问此URL的东西。

CSS代码

   #hideshow {
    background-image: url("../img/thematic.png");
    position: fixed;
    background-color: aliceblue;
    background-size: cover;
    border-radius: 100px 0px 10px 100px;
    padding: 2px 4px 2px 4px;
    width: 10px;
    height: 40px;
    cursor: pointer;
    opacity: 0.7;
    box-shadow: 2px 2px 2px #888888;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    z-index: 1;
}

#pnlThematic {
    width: 150px;
    height: 300px;
    margin-left: 150px;
    border: dotted;
}

#pnlThematicParent {
    width: 150px;
    height: 300px;
}

HTML：

<div id="pnlThematicParent">
        <div id="pnlThematic">
            <a id="hideshow">aa</a>
            <h3>Section 1</h3>             
        </div>
    </div>

jQuery代码

    <script type="text/javascript">
    $(document).on("ready", function () {
        var wWidth = $(document).width();

        var pnlThematicWidth = $("#pnlThematicParent").outerWidth();
        $("#pnlThematicParent").css({ 'margin-left': wWidth - (pnlThematicWidth - 8), 'overflow': 'hidden' });

        var elementWidth = $("#hideshow").width();
        $("a").css({ 'margin-left': -(elementWidth * 2) });

        $("a").on("click", function (ev) {
            var isVisible = $(ev.target).parent().is(":visible");
            $(ev.target).parent().animate({
                marginLeft: -(parseFloat($(ev.target).parent().css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()
            });
        });
    });
</script>

http://jsfiddle.net/Y3DS3/7/

我想打开和关闭带有红色圆圈的面板，但是当单击屏幕右侧的红色圆圈打开面板时，铬红色圆圈的位置未更改，但在Firefox和Firefox红色圆圈的位置随父div位置更改。 打开示例时，请单击屏幕右侧的红色圆圈。 谢谢大家的有趣作品

Answer 1

我不认为您要使用position:fixed ，而是要使用position:absolute 。 您还需要将父元素（例如#pnlThematic为position:relative才能使其正常工作。

这是因为您不是试图将链接固定在页面上，而是相对于父元素。

您将需要对css进行更多编辑以使其正确显示，但是我认为这实际上是您的问题所在。

Answer 2

如安德鲁的答案中所述，您需要在CSS中进行更改

的CSS

#hideshow {
      background-color: #F0F8FF;
      background-image: url("https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg");
      background-size: cover;
      border-radius: 100px 0 10px 100px;
      box-shadow: 2px 2px 2px #888888;
      cursor: pointer;
      height: 40px;
      left: -20px;
      opacity: 0.7;
      padding: 2px 4px;
      position: absolute;
      transition: opacity 0.5s ease 0s;
      width: 10px;
    }

    #pnlThematic {
      border: medium dotted;
      height: 100%;
      left: 0;
      position: relative;
      top: 0;
      width: 100%;
    }
    #pnlThematicParent {
      height: 300px;
      position: fixed;
      right: 0;
      width: 150px;
    }

而且您的脚本也有一些变化

脚本

var wWidth = $(document).width();

$('#pnlThematic').css({marginLeft:  -(parseFloat($('#pnlThematic').css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()});

var elementWidth = $("#hideshow").width();

$("a").on("click", function (ev) {
    var isVisible = $(ev.target).parent().is(":visible");
    $(ev.target).parent().animate({
        marginLeft: -(parseFloat($(ev.target).parent().css('marginLeft'))) < 0 ? 0 : $("#pnlThematicParent").outerWidth()
    });
});

工作小提琴

注意：不是固定句柄，而是固定父div