还是一篇实践文章，学习了布局的Position部分。新学的有用的方法。
Position
静态定位static
static是position属性的默认值，不会受到 top、bottom、left、right等属性的影响。
<html>
<head>
<style>
div{
height: 100px;
border: 1px solid rgb(187, 48, 48);
}
div.static {
width: 100px;
height: 100px;
background-color:pink;
line-height: 100px;
text-align: center;
position: static;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div>
<div class="static">static</div>
</div>
</body>
</html>
相对定位relative
相对于自己默认的位置在top、bottom、left和right上设置元素的偏移量。
<html>
<head>
<style>
div{
border: 1px solid rgb(126, 33, 33);
}
div.static {
width: 100px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
position: relative;
top: 25px;
left: 10px;
}
</style>
</head>
<body>
<div>
<div class="static">relative</div>
</div>
</body>
</html>
绝对定位absolute
元素相对于第一个非静态定位的父级元素进行定位，如果找不到符合条件的父级元素则会相对浏览器窗口来进行定位。可以在top、bottom、left和right上设置元素的偏移量。
<html>
<head>
<style>
div{
width: 800px;
height: 120px;
border: 1px solid rgb(130, 38, 38);
position: relative;
}
div.absolute {
width: 100px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
position: absolute;
bottom: 10px;
right: 50px;
}
</style>
</head>
<body>
<div>
<div class="absolute">absolute</div>
</div>
</body>
</html>
固定定位fixed
固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动。
<html>
<head>
<style>
div{
height: 500px;
border: 1px solid rgb(130, 38, 38);
}
div.fixed {
width: 100px;
height: 100px;
background-color: pink;
margin: 0;
text-align: center;
line-height: 100px;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div>
<div class="fixed">fixed</p>
</div>
</body>
</html>
粘性定位sticky
当滚动页面时的效果与相对定位相同，滚动到一定程度时它又会呈现出固定定位的效果。
在使用粘性定位时，需要注意以下几点：
设置sticky时，必须再定义top/bottom/right/left，否则会处于相对定位；使用粘性定位元素的父元素不能定义overflow:hidden或者overflow:auto属性；父元素的高度不能低于粘性定位元素的高度；粘性定位的元素仅在其父元素内有效。
<html>
<head>
<style>
div{
height: 500px;
position: relative;
}
p {
width: 100%;
height: 50px;
margin: 0;
text-align: center;
line-height: 50px;
background-color: pink;
}
p.sticky {
background-color: rgb(130, 38, 38);
position: sticky;
top:0px;
}
</style>
</head>
<body>
<div>
<p>0</p>
<p>2</p>
<p class="sticky">sticky</p>
<p>6</p>
<p>8</p>
</div>
</body>
</html>
