Jquery CSS位置：修复了不在Chrome中工作的问题

我编码了一些可以访问这个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:

jquerycode

    <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>

我想用红色圆圈打开和关闭面板，但在打开面板时，单击屏幕右侧的红色圆圈，在chrome红色圆圈位置未更改，但在ie和firefox红色圆圈位置随父divs位置更改。打开示例时，请单击屏幕右侧的红色圆圈。 谢谢你的关注

---

大家都很好

我不认为你想使用position:fixed，而是使用position:absolute。您还需要将父元素（如pnlThematic）设置为position:relative以使其工作

这是因为您没有尝试定位固定到页面的链接，而是相对于父元素

---

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

正如Andrew在回答中提到的，您需要对css进行更改

css

你的剧本也有点变化

剧本

工作

---

注意：与其将handle固定，不如将parent div固定

这应该做什么？请格式化您的代码并删除不相关的部分-我们不需要lorem ipsum等。还有，它应该做什么？css属性位置：fixed在最新的chrome Hi中完全受支持；我为lorem ipsum道歉。当circles parent div的左边距改变时，circles的位置不会改变，但在ie和firefox中，如果您在JSFIDLE中测试它，它会改变。它在ie和firefox中工作，但在chrome中不工作。谢谢您的精彩表演works@user3635801谢谢，我测试了FF和Chrome，明白你的意思了。这与位置无关：但已修复。Position fixed在两种浏览器上的行为与您的代码预期的一样。当你点击红色圆圈时，它不会向左移动。我建议您尝试设置红色圆圈的left属性的动画，而不是其父圈的左边距。这是一个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>

#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()
    });
});