定位
文档流：
指盒子按照html标签编写顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写到先排列，每个盒子占据自己的位置
关于定位：
使用css的position属性来设置元素的定位类型，position的设置如下：
1、relative 生成相对定位元素，元素所占的文档流位置保留，元素本身相对自身位置进行偏移
2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流位置，可以理解为漂浮在文档流上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
3、fixed生成固定定位元素，元素脱离文档流，不占据文档流位置，可以理解为漂浮在文档流上方，相对于浏览器窗口进行定位，不会找父级了。
4、static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
5、inherit 从父元素继承position属性的值。
定位元素的偏移：
left 从左向右移
right 从右向左移
top 从上向下移
bottom 从底向上移
定位的层级：
当有多个定位元素，会按照文档流顺序，代码在前的在最底层，代码最后的定位元素在最上层，可以用z-index改变这个设置，z-index：10；z-index后面的数字越大，越靠近最上层，比如设置一个弹框保持在页面最上层，可以在定位元素【样式】中设置：z-index:999;
定位元素特性：
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素，这一点跟浮动一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.con{
width:400px;
height: 400px;
border:1px solid #000;
margin:50px auto 0;
/*.con是box的父级，父级有了定位属性，子级会以父级定位为参照，没有这句，会以body为参照
父级只设置一个定位属性relative即可，不需要设置便宜，只为了给子级做偏移参照,但是要用相对偏移属性，其它属性会影响父级本身的位置*/
position:relative;
}
.box1{
width:300px;
height: 100px;
background-color: green;
margin:10px;
/*relative相对定位*/
/*position:relative;
left:50px;
top: 50px;
绝对定位：*/
/* position: absolute;
left:50px;
top:50px;*/
/*固定定位：*/
position:fixed;
left:50px;
top:50px;
}
.box2{
width:300px;
height: 100px;
background-color: gold;
margin:10px;
}
</style>
</head>
<body>
<div class="con">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号