CSS 中的最小/最大绝对位置 [英] Minimum / Maximum absolute position in CSS

问题描述

限制绝对定位元素位置的最佳方法是什么，最好是在纯 CSS 中?

What is the best approach to restricting an absolutely positioned element's position, ideally in pure CSS?

我知道以下是不可能的，但我想我要找的东西看起来像:

I know that the following isn't possible but I guess what I'm looking for would look something like:

.stickyElement{
   bottom-max:auto;      
   bottom-min:0px;
   top-max: auto;
   top-min: 100px;
 }

这将允许元素移动到距其包含的定位元素顶部不小于 100px 的位置.

That would allow an element to move to a position no less than 100px from the top of it's containing, positioned element.

一个示例(也是我最初的)用例是一个菜单，它作为页面的一部分滚动，但在到达视口顶部时停止滚动.(粘性菜单?)可以在此页面上看到的示例:http://spektrummedia.com/startups

An example (and my initial) use case for this is a menu that scrolls as part of a page but stops scrolling when it hits the top of a viewport. (Sticky menus?) an example of which can be seen on this page: http://spektrummedia.com/startups

我完全希望不使用一些 Javascript 就不可能做到这一点，但我想我会把它放在那里.

I fully expect that this is not possible without using some Javascript but I thought I'd put it out there.

推荐答案

position:sticky

W3C 中已经讨论最近几年.一种建议是为 position 属性添加一个 sticky 值.

position: sticky

There have been discussions in the W3C about this in recent years. One proposal is the addition of a sticky value for the position property.

.content {
    position: -webkit-sticky;
    position:    -moz-sticky;
    position:     -ms-sticky;
    position:      -o-sticky;
    position:         sticky;
    top: 10px;
}

Chrome 23.0.1247.0 及更高版本目前支持此功能，作为一项实验性功能.要启用它，请输入 about:flags 作为 URL 地址，然后按 Enter.然后搜索experimental WebKit features"并在启用和禁用之间切换.

This is currently supported in Chrome 23.0.1247.0 and later as an experimental feature. To enable it, enter about:flags for the URL address and press enter. Then search for "experimental WebKit features" and toggle it between enabled and disabled.

在 html5rocks 网站，有一个有效的演示.

On the html5rocks website, there's a working demo.

严格来说，这是粘性内容的一种实现，而不是限制元素相对于另一个元素的最小或最大位置的通用方法.但是，粘性内容可能是您所描述的行为类型的唯一实际应用.

Strictly speaking, this is an implementation of sticky content, and not a general-purpose way to limit the minimum or maximum position of an element relative to another element. However, sticky content might be the only practical application for the type of the behavior you're describing.

这篇关于CSS 中的最小/最大绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！