CSS中position样式属性
程序员文章站
2022-05-28 11:02:46
...
文档流
文档流又称正常流，是默认情况下HTML元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序。
position样式属性
1.static
默认值。没有定位，元素出现在正常流中，就像下面的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
</style>
</head>
<body>
<div style="background-color: blue; width: 100px; height: 100px;"></div>
</body>
</html>
2.fixed
fixed的作用是将当前元素按照相对于浏览器窗口的范围内进行定位，也就是使当前元素脱离文档流飘起来，可以调节与上下左右之间的间距来给该标签定位，以下是使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: blue;
position: fixed;<!--使当前元素脱离文档流飘起来-->
bottom: 10px;<!--距浏览器窗口下方10px-->
right: 10px;<!--距浏览器窗口右方10px-->
"></div>
<div class="in" style="background-color: red;width: 150px;"></div>
</body>
</html>3.relative
relative的作用是使当前元素相对于自身原位置定位的，所以它并没有使当前元素脱离文档流，同样也是可以调节与原位置上下左右之间的间距来给该标签定位，以下是使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: blue;
position: relative; <!--相对于该元素原位置进行定位-->
bottom: 10px; <!--相对于原位置的下方10px-->
right: 10px;"></div> <!--相对于原位置的右方10px-->
<div class="in" style="background-color: red;width: 150px;"></div>
</body>
</html>
4.absolute
absolute的作用是使元素相对于第一个position值为非static的父标签进行定位，并使其脱离文档流飘起来，以下是使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#out{
width: 300px;
height: 300px;
border: black 1px solid;
}
.in{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="out" style="position: relative;"><!--第一个position属性值不为static的父标签-->
<div class="in" style="background-color: green;"></div>
<div class="in" style="background-color: blue;
position: absolute;<!--相对于id为“out”的div标签定位-->
bottom: 10px;
right: 10px;
"></div>
<div class="in" style="background-color: red;width: 150px;"></div>
</div>
</body>
</html>