CSS：位置：固定内部位置：固定

CSS: position:fixed inside of position: fixed

提问by

Okay, I've noticed something, but couldn't find it in the CSS spec. Styling an element with position: fixedwill position it absolutely, with respect to the browser viewport. What happens if you place a fixed-position element inside another? Example CSS along the lines of:

好的，我注意到了一些东西，但在 CSS 规范中找不到它。样式元素position: fixed将相对于浏览器视口绝对定位。如果你把一个固定位置的元素放在另一个里面会发生什么？示例 CSS 如下：

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

And HTML:

和 HTML：

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

As far as I can tell, the element is fixed-positioned with respect to its nearest parent that's also fixed-positioned. Is this osbervable in all browsers; also, is it a bug, or intentional behaviour?

据我所知，该元素相对于它最近的也是固定位置的父元素是固定位置的。这在所有浏览器中都可以观察到吗？另外，这是一个错误还是故意的行为？

So far I've not found anything on this topic on the internet, just 'fixed position makes it stick to the page'.

到目前为止，我还没有在互联网上找到有关此主题的任何内容，只是“固定位置使其粘在页面上”。

采纳答案by mercator

The fixing and the positioning are two separate things. They're positioned the same as absolutely positioned elements: relative to their containing block. But in contrast with absolutely positioned elements, they remain fixed to that position with respect to the viewport (i.e. they don't move when scrolling):

固定和定位是两个独立的事情。它们与绝对定位元素的定位相同：相对于它们的包含块。但与绝对定位元素相比，它们相对于视口保持固定在该位置（即它们在滚动时不会移动）：

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference.

框的位置是根据“绝对”模型计算的，但此外，框相对于某个参考是固定的。

Positioning

定位

The definition of containing blocksays:

包含块的定义说：

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media (...)

如果元素具有“位置：固定”，则在连续媒体的情况下，包含块由视口建立（...）

and

和

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' (...)

如果元素具有“位置：绝对”，则包含块由最近的祖先建立，其“位置”为“绝对”、“相对”或“固定”(...)

which suggests that while their positioning algorithm is the same (they're both positioned relative to their containing block), the containing block for fixed elements is always the viewport, in contrast with absolutely positioned elements, so they should be positioned relative to thatand not to any absolutely or fixed-positioned elements.

这表明，尽管它们的定位算法是相同的（他们都位于相对于他们的包含块），用于固定的元件包含块总是视口，与绝对定位元素相反，所以它们应该相对于被定位的是和不是任何绝对或固定定位的元素。

And as a matter of fact, that is indeed the case. For example, if you add top: 20pxto .fixed, both divs will be positioned 20 pixels from the top of the viewport. The nested fixed div does not get positioned 20 pixels down from the top of its parent.

事实上，情况确实如此。例如，如果添加top: 20px到.fixed，则两个 div 都将位于距视口顶部 20 像素的位置。嵌套的固定 div 不会从其父级顶部向下定位 20 像素。

The reason you're not seeing that in this case is because you're not actually setting any of the left/top/right/bottom properties, so their positions are determined by the position they would have in the flow (their "static position"), which as my first quote said, is done according to the absolute model.

在这种情况下您没有看到的原因是因为您实际上没有设置任何左/上/右/下属性，因此它们的位置由它们在流中的位置决定（它们的“静态位置”）")，正如我的第一句话所说，是根据绝对模型完成的。

回答by Gordon Gustafson

I don't think this is really the intent. Things with fixed positioning are all positioned in relation to the window, if you have a fixed a child of another fixed, what do you want to happen? You can easily duplicate the behavior by not just position both of the fixed elements separately, or using other position to alter the child's position within the fixed element. :D

我不认为这是真正的意图。固定定位的东西都是相对于窗口定位的，如果你有一个固定的另一个固定的孩子，你想发生什么？您可以通过不只是单独放置两个固定元素或使用其他位置来更改子元素在固定元素内的位置来轻松复制行为。:D

回答by Gavrisimo

I dont think there is anything more to this then what w3c say there is:

我认为没有什么比 w3c 所说的更多了：

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

生成相对于浏览器窗口定位的绝对定位元素。元素的位置由“left”、“top”、“right”和“bottom”属性指定

So if you get rid of that "padding: 40px;" you will get 2 elements - 1 over another.

所以如果你去掉那个“padding: 40px;” 你会得到 2 个元素 - 1 个元素。

Same effect like if you positioned both elements absolutely to top:0 left:0 with same parent(body).

与将两个元素绝对定位到 top:0 left:0 并使用相同的 parent(body) 相同的效果。

回答by Ashnet

First element

第一个元素

position: fixed;

position: fixed;

And the insider element must be:

并且内部元素必须是：

position: sticky;

position: sticky;

回答by yaya

Short Answer:

简答：

if you have a scrollable element with fixed position (a modal for example), and you want to make one of the childs fixed also(modal close button for example), here is the solution: you can make your element non-scrollable, and instead create a child inside of it and make it scrollable(modal content for example). this way , you can apply position: absoluteto the child you want it to be fixed (modal close button for example), instead of position: fixed.

如果您有一个固定位置的可滚动元素（例如模态），并且您还想让其中一个子元素也固定（例如模态关闭按钮），那么解决方案是：您可以使元素不可滚动，并且而是在其中创建一个子项并使其可滚动（例如模态内容）。这样，你就可以申请position: absolute到你希望它是固定的，而不是（例如模态关闭按钮），孩子position: fixed。

Long Answer:

长答案：

In my case, i had a display: fixedModal and applied the overflow: autoto it to make it scrollable. then i wanted to make the close button display: fixed.

就我而言，我有一个display: fixedModal 并将 应用于overflow: auto它以使其可滚动。然后我想做关闭按钮display: fixed。

Nesting display: fixedworked on chrome, but not in Firefox. so i changed my structure, i removed the overflow: autofrom Modal to make it non-scrollable, and instead made the modal content scrollable. and also added position: absoluteto close button.

嵌套适用display: fixed于 chrome，但不适用于 Firefox。所以我改变了我的结构，我overflow: auto从 Modal 中删除了它以使其不可滚动，而是使模态内容可滚动。并添加position: absolute到关闭按钮。