近期会更新一系列博客，再次对基础知识进行巩固和梳理。
1.职位定位（一）：职位的属性
1.absolute：生成绝对定位元素，相对于一级定位非静态的父元素进行定位；
2.relative：生成相对定位的元素，相对于它们所在的正常文档流位置定位；
3. static：默认值，不定位，元素出现在正常的文档流中；
4.修复：旧版IE不支持。 与绝对一致。 它相对于窗口定位。 滚动条出现时，不随滚动条滚动；
5. Sticky：（CSS3）存在兼容性问题。 它就像相对和固定的组合。 当它在屏幕上时，它会按照正常流程进行格式化，而当它滚动到屏幕外时css左浮动，它会表现得像固定的。 这个属性的表现就是你现实中看到的吸附效果。
(2)：关于职位使用通常引起的问题
1、如果有一个默认长度为100%的div，一旦添加了绝对定位，该元素会立即内联阻塞，默认长度会自适应元素内部长度，从而导致宽度和宽度要折叠的页面的高度。
2、由于绝对定位的灵活性，对于普通的页面布局，有时很容易造成为了省事而滥用absolute/relative/top/left/z-index，给后期的扩展和扩展带来麻烦维护
(3)：位置代码示例
1.相对相对定位。
对象2连接到其自身文档流的原始位置，并且仍然抢占文档流。 下面的黄色块继续按照原来的位置排列。 相对位置仅在视觉上发生变化。
<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}
#position1 {height: 100px;background: green;}
#position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}
#position3{height: 100px;background: yellow;color: #000}
</style>
<body>
<div class="aa">
<div id="position1">对象1</div>
<div id="position2">对象2</div>
<div id="position3">对象3</div>
</div>
</body>2.绝对绝对定位
该对象的 1absolut 属性相对于父 div 倾斜，超出文档流css左浮动，并在文档流上方的宽度和高度上折叠。
<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px;position: relative;}
#position1 {height: 100px;background: green;position: absolute;top: 10px;left:50px; }
#position2 {height: 100px;background: blue;}
#position3{height: 100px;background: yellow;color: #000}
</style>
</head>
<body>
<div class="aa">
<div id="position1">对象1</div>
<div id="position2">对象2</div>
<div id="position3">对象3</div>
</div>二、float浮动 (1)float的定义
float 属性定义元素向左/向右浮动。 无论元素本身如何，浮动元素都会生成块级框。
浮点值：左/右/无
(2)Float实现文字换行
具有浮动属性的元素还可以使元素成为inline-block，具有包裹属性，使元素结合了块元素和内联元素的优点。 具有浮动属性的元素将按照标准流程进行排列。 脱离标准流后的浮动元素悬浮在正常的块元素前面，并且仍然占据正常文档流的文本空间，这样旁边的文本就不仅仅是浮动元素之外的空间了，用于对齐基准测试，产生文本环绕效果。
<style>
.a{width: 200px;height: 400px;margin: 0 auto;border: 1px solid #000;}
.pic{float: left;}
p{font-size: 16px;line-height: 18px;font-family: "Microsoft Yahei"}
</style>
</head>
<body>
<div class="a">
<img src="2.jpg" width="100" width="100" class="pic">
<p>这是一段测试文字啦啦啦啦啦这是一段测试文字啊啊啊啊啊这是一段文字显示呐呐呐呐这是一段文字显示啦啦啦啦啦</p>
</div>(3)float浮动布局
标准文档流程是从上到下。
div1向左浮动后，明显高度塌陷，div2、div3与div1重叠。
(4)为什么要消除浮动以及消除浮动的几种方法
作为副作用，元素的高度因浮动而塌陷，父包的边框无法拉伸，背景无法显示，母子之间的 margin 和 padding 设置无法正确显示。
<style>
.div1{width: 400px;border: 2px solid #000;}
.div2{width: 100px;height: 100px;background: blue;float: left;}
.div3{width: 100px;height: 100px;background: green;float: right;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>方法一：在父标签末尾添加子标签
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
<div style="clear:both;"></div>
</div>方法二：添加overflow:hidden;zoom:1; 或溢出：自动；缩放：1； 到父级 css 属性
方法三：在父级使用zoom:after方法，原理与clear:both类似，借助CSS form:after在元素内部添加一个clear:both元素块
.box1{zoom:1;}
.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}方法四：设置合适的高度让parent直接展开
(5) 浮动与JavaScript
IE浏览器：
obj.style.styleFloat = "left";其它浏览器：
obj.style.cssFloat = "left";
