mozilla

Compare Revisions

position

Change Revisions

Revision 512541:

Revision 512541 by chilloutman on

Revision 515611:

Revision 515611 by appsforartists on

Title:
position
position
Slug:
Web/CSS/position
Web/CSS/position
Tags:
"CSS Positioning", "CSS", "Reference", "Référence", "CSS Property", "NeedsLiveSample"
"CSS Positioning", "CSS", "Reference", "Référence", "CSS Property", "NeedsLiveSample"
Content:

Revision 512541
Revision 515611
n130#one { position: fixed; top: 80px; left: 20px }n130#one { position: fixed; top: 80px; left: 20px; }
nn141    <h3 id="Fixed_positioning" style="line-height: 19.99200057983
 >3984px;">
142      Sticky positioning
143    </h3>
144    <p>
145      Sticky positioning is a hybrid of relative and fixed positi
 >oning. &nbsp;The element is treated as relative positioned until 
 >it crosses a specified threshold, at which point it is treated as
 > fixed positioned. &nbsp;For instance:
146    </p>
147    <div>
148      <pre class="brush: css" style="font-size: 12px;">
149#one { position: sticky; top: 10px; }
150</pre>
151      <div>
152        will behave just like a relatively positioned element unt
 >il the viewport scrolls such that the element would be less than 
 >10px from the top. &nbsp;Then, it will be fixed to 10px from the 
 >top until the viewport is scrolled back passed this threshold.
153      </div>
154      <div>
155        &nbsp;
156      </div>
157      <div>
158        Sticky positioning is commonly used for the headings in a
 >n alphabetized listing. &nbsp;The B heading will appear just belo
 >w the items that begin with A until they are scrolled offscreen. 
 >&nbsp;Rather than sliding offscreen with the rest of the content,
 > the B heading will then remain fixed to the top of the viewport 
 >until all the B items have scrolled offscreen, at which point it 
 >will be covered up by the C heading.
159      </div>
160      <div>
161        &nbsp;
162      </div>
163      <div>
164        <a href="http://jsfiddle.net/daker/ecpTw/light/"><code>De
 >mo</code></a>
165      </div>
166      <div>
167        &nbsp;
168      </div>
169      <div>
170        You must specify a threshold with at least one of&nbsp;<s
 >pan style="line-height: 1.5;">{{Cssxref("top")}}, {{Cssxref("righ
 >t")}}, {{Cssxref("bottom")}}, or {{Cssxref("left")}} for sticky p
 >ositioning to behave as expected. &nbsp;Otherwise, it will be ind
 >istinguishable from relative positioning.</span>
171      </div>
172      <div>
173        &nbsp;
174      </div>
175    </div>
t151      Most of the time, absolutely positioned elements have <codet186      <span style="line-height: 1.5;">Most of the time, absolutel
>>auto</code> values of {{Cssxref("height")}} and {{Cssxref("width>y positioned elements have</span> <code style="font-size: 14px;">
>")}} computed to fit the contents of the element. However, non-re>auto</code> <span style="line-height: 1.5;">values of {{Cssxref("
>placed absolutely positioned elements can be made to fill the ava>height")}} and {{Cssxref("width")}} computed to fit the contents 
>ilable space by specifying (as other than <code>auto</code>) both>of the element. However, non-replaced absolutely positioned eleme
> {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxr>nts can be made to fill the available space by specifying (as oth
>ef("height")}} unspecified (that is, <code>auto</code>). Likewise>er than</span> <code style="font-size: 14px;">auto</code><span st
> for {{Cssxref("left")}}, {{Cssxref("right")}}, and {{Cssxref("wi>yle="line-height: 1.5;">) both {{Cssxref("top")}} and {{Cssxref("
>dth")}}.>bottom")}} and leaving {{Cssxref("height")}} unspecified (that is
 >,</span> <code style="font-size: 14px;">auto</code><span style="l
 >ine-height: 1.5;">). Likewise for {{Cssxref("left")}}, {{Cssxref(
 >"right")}}, and {{Cssxref("width")}}.</span>

Back to History