в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:18Z

1 версия

Новая страница

==Absolute and fixed positioning use left, right, top, bottom, and z-index to control the alignment of the absolute box.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.section{
position: fix;
width: 600px;
height: 600px;
background: gray;
}
* .absolute {
position: absolute;
top: 20px;
left: 215px;
background: yellow;
width: auto;
}
* .fixed {
position: fixed;
bottom: 20px;
right: 5px;
background: gold;
}
</style>
</head>
<body>
<div class="section">
<p class="static centered" >
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
</p>
</div>
</body>
</html>
</source>

==Elements with a fixed position are always positioned relative to the browser"s viewport, not in a document"s structure.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed Positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
div {
position: fixed;
background: gold;
border: 1px solid black;
width: 100px;
height: 100px;
}
div#fixed-top {
top: 5px;
left: 5px;
}
div#fixed-bottom {
bottom: 5px;
left: 5px;
}

</style>
</head>
<body>
<div id="fixed-top">
</div>
<div id="fixed-bottom">
</div>

</body>
</html>
</source>

==Elements with a fixed position stay in place, even when a document is scrolled.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Fixed Positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
div {
position: fixed;
background: gold;
border: 1px solid black;
width: 100px;
height: 100px;
}
div#fixed-top {
top: 5px;
left: 5px;
}
div#fixed-bottom {
bottom: 5px;
left: 5px;
}

</style>
</head>
<body>
<div id="fixed-top">
</div>
<div id="fixed-bottom">
</div>

</body>
</html>
</source>

==Fixed block to bottom and left==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
p {
line-height: 2em;
margin: 10px 110px;
}
div#one {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
position: fixed;
background: yellowgreen;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
<div id="one"></div>
</body>
</html>
</source>

==Fixed block to bottom and right==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
p {
line-height: 2em;
margin: 10px 110px;
}
div#one {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
position: fixed;
background: orange;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
<div id="one"></div>
</body>
</html>
</source>

==fixed block to top and left==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
p {
line-height: 2em;
margin: 10px 110px;
}
div#one {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
position: fixed;
background: pink;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
<div id="one"></div>
</body>
</html>
</source>

==Fixed block to top and right==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
p {
line-height: 2em;
margin: 10px 110px;
}
div#one {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
position: fixed;
background: lightblue;
top: 0;
right: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
<div id="one"></div>
</body>
</html>
</source>

==Fixed block with width and height to bottom and top==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>positioning</title>
<style rel="stylesheet" type="text/css">
body {
background: lightyellow;
}
p {
line-height: 2em;
margin: 10px 10px 10px 110px;
}
div {
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
background: pink;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
<div></div>
</body>
</html>
</source>

==Fixed position and static position==



<source lang="html4strict">

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
color: #000;
background-color: #ccc;
}

.myStyle {
position: static;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
.different {
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 20%;
}
</style>
</head>

<body>
<div class="different">1</div>
<div class="myStyle">2</div>
<div class="myStyle">3</div>
<div class="myStyle">4</div>
</body>

</html>
</source>

==Fixed top, footer and left bar==



<source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
#top-bar {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
* html #top-bar {
position: absolute;
}
#topbar-inner {
height: 23px;
background: #bbb;
}
* html #topbar-inner {
margin-right: 17px;
}
* html body {
padding-top: 23px;
}
* html,* html body {
overflow-y: hidden;
height: 100%;
margin-top: -23px;
}
#mainouter {
position: relative;
z-index: 2;
padding-top: 23px;
padding-bottom: 40px;
margin-left: 150px;
background: #ccc;
min-height: 100%;
}
* html #mainouter {
height: 100%;
overflow: auto;
overflow-y: scroll;
position: relative;
z-index: 2;
padding-top: 23px;
padding-bottom: 40px;
}
#bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 40px;
}
* html #bottom {
position: absolute;
bottom: -1px;
}
#bottom-inner {
height: 40px;
background: #aaa;
}
* html #bottom-inner {
margin-right: 17px;
}
* html #left {
position: absolute;
height: 100%;
width: 150px;
left: 0;
top: 23px;
overflow: auto;
z-index: 100;
margin-bottom: -63px;
}
html>body #left {
position: fixed;
left: 0;
top: 23px;
bottom: 40px;
padding: 0;
width: 149px;
border-right: 1px solid #000;
}
</style>
</head>
<body>
<div id="top-bar">
<div id="topbar-inner">this is a test. this is a test. </div>
</div>
<div id="left">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div id="mainouter">
<p>Content start</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content end</p>
</div>
<div id="bottom">
<div id="bottom-inner">Fixed Bottom</div>
</div>
</body>
</html>
</source>

==move an element into its own layer and fix its position to the viewport.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .grandContainer {
position: relative;
z-index: 1;
width: 800px;
height: 800px;
background: red;
}
#in-place {
position: fixed;
z-index: 1; width 600px;
height: 600px;
background: yellow;
}
#shrinkwrapped {
position: fixed;
z-index: 0;
width: auto;
left: 0;
bottom: 0;
margin: 0;
background: blue;
}
#sized {
position: fixed;
z-index: auto;
width: 170px;
height: 115px;
bottom: 0;
left: 270px;
margin: 0;
background: gold;
}
#stretched {
position: fixed;
z-index: -1;
height: auto;
right: 0;
top: 0;
bottom: 0;
margin: 0;
background: pink;
}
</style>
</head>
<body>
<div class="grandContainer"><h2>Positioned Grandparent</h2>
<div class="parent">
<h2>Non-positioned Parent</h2>
<span id="in-place" class="box">In-place Absolute</span>
<span id="sized" class="box">Sized Absolute</span>
<p id="stretched" class="box">Stretched Absolute</p>
<p id="shrinkwrapped" class="box">Shrinkwrapped Absolute</p>
</div>
</div>
</body>
</html>
</source>

==Position:fixed header==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Position:fixed</title>
<style type="text/css">
body {
margin: 0 auto;
width: 500px;
}
h1 {
background: black;
color: white;
height: 60px;
position: fixed;
}
div {
padding-top: 130px;
}
</style>
</head>
<body>
<h1>this is the header</h1>
<div id="content">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
this is a test. this is a test. this is a test. this is a test. this is a test.
<br/><br/><br/><br/><br/><br/><br/>
this is a test. this is a test. this is a test. this is a test. this is a test.
<br/><br/><br/><br/><br/><br/><br/>

this is a test. this is a test. this is a test. this is a test. this is a test.
<br/><br/><br/><br/><br/><br/><br/>

</div>
</body>
</html>
</source>

==position-fixed offset: left top==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
height: 2000px;
}
div {
position: fixed;
padding: 10px;
border: 1px solid black;
opacity: 0.7;
background: lightyellow;
}
div#div1 {
top: 0;
left: 0;
}
div#div2 {
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="div1">
This is the text of the first div.
This is the text of the first div.
</div>
<div id="div2">
This is the text of the second div.
This is the text of the second div.
</div>
</body>
</html>
</source>

==position:fixed positions an element at an offset from the viewport.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div,p,em {
margin: 10px;
padding: 10px;
background-color: white;
}
* .pos {
position: fixed;
}

</style>
</head>
<body>
<div class="relative">
<p class="pos">Positioned</p>
</div>
</body>
</html>
</source>

==position fixed: top left==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
height: 2000px;
}
div {
position: fixed;
padding: 10px;
border: 1px solid black;
opacity: 0.7;
background: #ccc;
}
#div1 {
top: 0;
left: 0;
}
#div2 {
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
</html>
</source>

==Using Fixed Positioning==



<source lang="html4strict">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Using Fixed Positioning</title>
<style type="text/css" rel="stylesheet">
p {
border-width: thin;
border-style: solid;
height: 100px;
width: 100px;
text-align: center}
p.red {background-color: red; position: fixed; top: 0; left: 0}
p.white {background-color: white; position: fixed; top: 0; left: 150px}
p.blue {background-color: blue; position: fixed; top: 0; left: 300px}
</style>
</head>
<body>
<p class="red">
Container 1
</p>
<p class="white">
Container 2
</p>
<p class="blue">
Container 3
</p>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>

==watermark with position fixed==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
h1, h2 {
margin: 0;
background: gray;
}
h1 {
border-bottom: 5px solid black;
}
div {
background: lightgrey;
padding: 0.7em;
clear: left;
}
div#watermark {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 4em;
padding: 0.1em;
background: white;
color: gray;
opacity: 0.5;
}
div#watermark a {
color: black;
text-decoration: none;
}

p {
border: 0.05em solid black;
padding: 0.8em;
}
h3:target {
color: yellow;
background: red;
}
ul#top li a {
color: black;
}
</style>
</head>
<body>
<div>
<h2>faq</h2>
This is a test. This is a test. This is a test. This is a test. This is a test.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
This is a test. This is a test. This is a test. This is a test. This is a test.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</div>
<div id="watermark">
<a href="">W</a>
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Layout/position fixed - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия