<!
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, stuck</
title >
<
link rel=
"author" title =
"Corey Ford" href=
"mailto:cford@mozilla.com" >
<
link rel=
"match" href=
"right-1-ref.html" >
<
meta name=
"flags" content=
"dom" >
<
meta name=
"assert" content=
"Sticky-right scrolled to the left: should stick to the right edge of the scrolling container" >
<
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 = 5;
</
script >
</
body >
</
html >
Messung V0.5 C=99 H=100 G=99
¤ Dauer der Verarbeitung: 0.13 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland