发表新帖
发表新帖

Fixed position but relative to container

后端 未结
关注
25 1636
独厮守ぢ
独厮守ぢ 2020-11-21 23:52

I am trying to fix a div so it always sticks to the top of the screen, using:

position: fixed;
top: 0px;
right: 0px;

However,

相关标签:
25条回答
  • 无人共我
    2020-11-22 00:35

    Check this:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>
    0 讨论(0)
  • 离开以前
    2020-11-22 00:37

    Short answer: no. (It is now possible with CSS transform. See the edit below)

    Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

    #fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

    http://jsfiddle.net/HFjU6/1/

    Edit (03/2015):

    This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

    Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

    .fixedContainer {
    background-color:#ffffd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

    If you want it to be centered, you can do that too:

    .fixedContainer {
    background-color:#ffffd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

    Demos:

    jsFiddle: Centered horizontally only
    jsFiddle: Centered both horizontally and vertically
    Original credit goes to user aaronk6 for pointing it out to me in this answer

    0 讨论(0)
  • 暖寄归人
    2020-11-22 00:39

    Yes it is possible as long as you don't set the position (top or left, etc.) of your fixed element (you can still use margin to set a relative position, though). Simon Bos posted about this a while ago.

    However don't expect fixed element to scroll with non-fixed relatives.

    See a demo here.

    0 讨论(0)
  • 滥情空心
    2020-11-22 00:40

    position: sticky that is a new way to position elements that is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

    In Chrome 56 (currently beta as of December 2016, stable in Jan 2017) position: sticky is now back.

    https://developers.google.com/web/updates/2016/12/position-sticky

    More details are in Stick your landings! position: sticky lands in WebKit.

    0 讨论(0)
  • 猫巷女王i
    2020-11-22 00:43

    Actually this is possible and the accepted answer only deals with centralising, which is straightforward enough. Also you really don't need to use JavaScript.

    This will let you deal with any scenario:

    Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute, but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.

    For example:

    /* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}
    <div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

    Sadly, I was hoping this thread might solve my issue with Android's WebKit rendering box-shadow blur pixels as margins on fixed position elements, but it seems it's a bug.
    Anyway, I hope this helps!

    0 讨论(0)
  • 萌比男神i
    2020-11-22 00:44

    It's possible if you use JavaScript. In this case, the jQuery plugin Sticky-Kit:

    0 讨论(0)
 看不清?
提交回复
热议问题