Question

132

Minimum / Maximum absolute position in CSS

rated 0 times [ 135] [ 3] / answers: 1 / hits: 37256 / 11 Years ago, tue, april 23, 2013, 12:00:00

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;

 }

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

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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eden

Add To Favorites

Follow

Total Points: 730

Total Questions: 117

Total Answers: 117

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

answered 11 Years ago taylert · Accepted Answer

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;

}

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.

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.