1.position样式属性
首先介绍一下文档流,文档流有称为正常流,是默认情况下元素会自上而下,从左到右排放的一种顺序。position属性是用于定义元素排版布局的一种定义类型。任何标记样式都有position属性。position属性具有下列值:
- static :默认值,没有定位,元素出现在正常流中
- fixed:会使当前标记脱离文档流,相对于浏览器窗口固定
- relative:不会使当前标记脱离文档流,相对于原来位置定位
- absolute:会使当前标记脱离文档流,相对于最近的且position为非static的父标记定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.out{
width: 300px;
height: 300px;
}
.in{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="out" style="border: 1px solid red;">
<div class="in" style="background-color: yellow;"></div>
<div class="in" style="backgroun