CSS position:fixed not working in Chrome

Question

I coded some things which access on this url.

CSS Codes

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

JQueryCodes

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

I Wantto open and close panel with red circle but when opening panel with clicking red circle right of the screen in chrome red circles position not changed but in ie and firefox red circles position changing with parent divs position. when open the example please click red circle on right of the screen. Thanks for your interesting Good Works Everyone

Answer 1

As mentioned in Andrew's answer u need to make changes in your 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;
    }

and a little change in ur script too

script

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

working fiddle

Note: Instead of making handle fixed make parent div fixed

Answer 2

I don't think you want to use position:fixed but instead use position:absolute. You will need to also set a parent element such as #pnlThematic to position:relative to make it work.

This is because you are not trying to position the link fixed to the page, but rather relative to the parent element.

You will need to make a few more edits to your css to make it show properly, but I think that's essentially where your problem lies.