Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>CSS Test: Position set to 'fixed'</title>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-09-19 -->
<meta name="flags" content="interact" />
<meta name="assert" content="The 'position' property applies the value 'fixed' and places the element out of flow of the document and locks it to a specific point on the viewport." />
<style type="text/css">
#wrapper
{
height: 3000px;
}
#div1
{
background: red;
border: 3px solid orange;
}
#div2
{
background: blue;
color: white;
left: 1in;
position: fixed;
top: 1.75in;
}
</style>
</head>
<body>
<p>Test passes if there is no red, if the blue stripe is just as wide and just as tall as its text and if the blue stripe is completely shifted below the orange line. Also when scrolling, the blue stripe must stay at its same position on the screen, all other content can scroll.</p>
<div id="wrapper">
<div id="div1">
<div id="div2">Text sample</div>
</div>
</div>
</body>
</html>