文档流又称正常流,是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。用于定义建立元素布局所用的定位类型,该属性有多个值:
static:默认值。没有定位,元素出现在正常流中
1、relative:相对定位
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#out{
border: crimson 1px solid;
height: 300px;
width: 300px;
}
.in{
height: 100px;
width: 100px;
}
</style>
</head>
<body >
<!--(1)position的fixed、relative、absolute-->
<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 /><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 /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="out">
<div class="in" style="background-color: orangered"></div>
<div class="in" style="background-color: cornflowerblue;"></div>
<div class="in" style="background-color: peru; position: relative;right: 10px;bottom: 10px;"></div>
</div>
</body>
2、fixed:绝对定位的标签,相对于浏览器窗口进行定位,此元素不会随滚动条滑动
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#out{
border: crimson 1px solid;
height: 300px;
width: 300px;
}
.in{
height: 100px;
width: 100px;
}
</style>
</head>
<body >
<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 /><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 /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="out">
<div class="in" style="background-color: orangered; "></div>
<div class="in" style="background-color: cornflowerblue;"></div>
<div class="in" style="background-color: peru; position: fixed;right: 10px;bottom: 10px;"></div>
</div>
</body>
3、absolute:绝对定位,相对于标签本身第一个position为非默认的父元素进行定位,若父标签均为默认则此时与fixed等价
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">ute:相对于第一个position值为非static的父标签
*/
#out{
border: crimson 1px solid;
height: 300px;
width: 300px;
}
.in{
height: 100px;
width: 100px;
}
</style>
</head>
<body >
<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 /><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 /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="out" style="position: relative;">
<div class="in" style="background-color: orangered"></div>
<div class="in" style="background-color: cornflowerblue;"></div>
<div class="in" style="background-color: peru; position: absolute;right: 10px;bottom: 10px;"></div>
</div>
</body>