<!
DOCTYPE html >
<!-- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/ -->
<
html >
<
head >
<
title >CSS Test: Sticky Positioning - right, contained</
title >
<
link rel=
"author" title =
"Corey Ford" href=
"mailto:cford@mozilla.com" >
<
link rel=
"match" href=
"right-3-ref.html" >
<
meta name=
"flags" content=
"dom" >
<
meta name=
"assert" content=
"Sticky-right with too much scrolling: should stay within the containing block" >
<
style >
#scroll {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
white-space: nowrap;
}
#scroll
div {
display: inline-block;
}
.fill {
width: 100px;
height: 1px;
}
#contain {
width: 200px;
height: 10px;
background-color: gray;
/* This puts the sticky element
's "normal position" at
the right side of the containing block. */
direction: rtl;
}
#sticky {
position: sticky;
right: 10px;
width: 10px;
height: 10px;
background-color: black;
}
</
style >
<
body >
<
div id=
"scroll" >
<
div class=
"fill" ></
div
><
div id=
"contain" >
<
div id=
"sticky" ></
div >
</
div
><
div class=
"fill" ></
div >
</
div >
<
script type=
"text/javascript" >
document.getElementById(
"scroll" ).scrollLeft = 220;
</
script >
</
body >
</
html >
Messung V0.5 C=94 H=96 G=94
¤ Dauer der Verarbeitung: 0.2 Sekunden
¤
*© Formatika GbR, Deutschland