总体内容
1、文档流的介绍
2、关于定位的属性以及使用
3、案例的展示
一、文档流的介绍
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
二、关于定位的属性以及使用
- 2.1、用css的position属性来设置元素的定位类型，postion的设置项如下：
- <1>、
relative生成 相对定位 元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
.box1{ background-color: pink; position: relative; left: 50px; top: 50px; }
提示：position 要配合
left、right、top、bottom来使用
- <2>、
absolute生成 绝对定位 元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
// 父级样式 .con{ width: 400px; height: 400px; border: 1px solid #000; margin: 50px auto; position: relative; } .box1,.box2{ width: 300px; height: 100px; margin: 10px; } .box1{ background-color: pink; /* 2、绝对定位 */ position: absolute; left: 50px; top: 50px; }
提示：在设置为 position: relative; 后，就会相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。，上图我们对 box1的父级元素进行了定位
- <3>、
fixed生成 固定定位 元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位
.box1{ background-color: pink; /* 3、固定定位 */ position: fixed; left: 50px; top: 50px; }
- <4>、
static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。 - <5>、
inherit从父元素继承 position 属性的值。
- 2.2、定位元素的偏移：定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
提示：
left是相对于左边向右偏移，right是相对于右边向左偏移，top是相对于上面向下偏移，bottom是相对于下面向上偏移。
- 2.3、定位元素层级 ：定位元素是浮动的正常的文档流之上的，可以用
z-index属性来设置元素的层级
在元素设置定位后，层级的是按照标签的先后顺序来排列的，最后面的标签在显示的时候再最上面，我们可以使用 z-index 属性 来改变层级顺序的问题，默认的层级是小于 10的，如下例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位的层级</title> <style type="text/css"> .con{ width: 400px; height: 400px; border: 1px solid #000; margin: 50px auto; position: relative; } .con div{ width: 90px; height: 90px; position: absolute; } .box1{ background-color: pink; left: 20px; top: 20px; z-index:10; } .box2{ background-color: red; left: 40px; top: 40px; } .box3{ background-color: green; left: 60px; top: 60px; } .box4{ background-color: yellow; left: 80px; top: 80px; } </style> </head> <body> <div class="con"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="box4">box4</div> </div> </body> </html>
提示：我们可以个每个盒子的样式设置
z-index来改变其展示的层级顺序
- 2.4、定位元素特性：绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
三、案例的展示
- 3.1、制作如下图的页面
4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位练习一</title> <style type="text/css"> .con{ width: 100px; height: 100px; background-color: gold; margin: 50px auto; /* 相对定位 */ position: relative; border-radius: 10px; } .box1{ width: 28px; height: 28px; background-color: red; color: white; text-align: center; line-height: 28px; font-size: 16px; /* 绝对定位 */ position: absolute; left: 86px; bottom: 86px; /* 圆角的设置 */ border-radius: 14px; } </style> </head> <body> <div class="con"> <div class="box1">10</div> </div> </body> </html>
- 3.2、固定在顶部的水平居中的菜单
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位练习二</title> <style type="text/css"> .con{ width: 400px; height: 80px; background-color: yellow; position: fixed; left: 50%; margin-left: -200px; } .con div{ line-height: 80px; text-align: center; } div{ text-align: center; } </style> </head> <body> <div class="con"> <div>固定在顶部的水平居中的菜单</div> </div> </body> </html>
提示：上述代码要注意居中的技巧
- 水平居中
left: 50%; margin-left: -盒子宽度的一半px;
- 垂直居中
top: 50%; margin-top: -盒子高度的一半px;
