浮动和定位

浮动

如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征：

1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位

2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上

3、浮动元素只会在当前行内浮动

4、浮动元素依然位于包含框之内

5、浮动定位解决的问题-让多个块级元素在一行内显示

属性：float

取值：1、none，默认值，无浮动定位

2、left，左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素

3、right，右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素

浮动引发的特殊效果

1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示(有可能被卡住)

2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度，行内块元素特征)，前提：不指定元素宽度的情况下

3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大

块级元素：允许修改尺寸

行内元素：不允许修改尺寸

4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。

清除浮动影响

属性：clear

取值： 1、none，默认值，不做任何清除操作

2、left，清除该元素左边(上边)的浮动元素所带来的影响

3、right，清除该元素右边的浮动元素所带来的影响

4、both，清除该元素两边的浮动元素所带来的影响

浮动元素对父元素所带来的影响

影响：由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0

解决方案：1、直接设置父元素高度

弊端：必须要知道父元素高度是多少

2、设置父元素也浮动

弊端：对后续元素会带来位置的影响

3、为父元素设置 overflow 属性

取值：hidden 或 auto或是scroll

弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。

4、:after伪元素，最推荐的做法

.clear::after{

content:’’,

								 display:block;

								 clear:both;

Heigth:0;

visibility:hidden

}

.clear{

/IE6、7专用/

								 *zoom:1;

}

5、在父元素中，追加空子级块级元素，并设置其clear属性值为 both，原理跟4其实是一样的

定位属性：position

取值：1、static，默认值，默认定位方式

2、relative，相对定位

3、absolute，绝对定位

4、fixed，固定定位（必须给宽度）

5、sticky，粘性定位

注意：position取值为 relative，absolute，fixed 的元素被称为 已定位元素

偏移属性

作用：移动已定位元素

属性：top:值;

bottom:值;

l left:值;

right:值;

注意：添加了定位的行内元素可以设置宽度，块级元素如果没有设置宽高就根据内容自适应

p{
	position:absolute;
	top:50px;
	left:100px
}

相对定位

position:relative，

作用：元素会相对于它原来的位置偏移某个距离，元素移动位置后，原来所占据的空间依然会保留，可以设置margin:auto水平居中

语法：属性：position:relative，配合着 偏移属性 实现位置的移动

绝对定位

position:absolute

绝对定位的特征

1、元素会脱离文档流，不可以设置margin:auto水平居中

2、相对于最近的已定位的祖先元素 来实现位置的初始化

3、如果元素没有已定位祖先元素，那么它的位置就相对于最初的包含块(body,html)

语法：属性：position:absolute，配合着 偏移属性 实现位置的初始化或移动

注意：1、绝对定位的元素会变成块级

2、绝对定位的元素可以使用 margin来改变位置，但是 margin:auto 会失效

固定定位

position:fixed（必须给宽度）

特征：将元素固定在网页的某个位置处,不可以设置margin:auto水平居中

不会随着滚动条而发生位置的变化

语法：position:fixed，配合偏移属性 改变元素位置

注意：固定定位永远都是相对于浏览器窗口进行位置初始化的。

粘性定位

position:sticky

特征：1、以浏览器的可视窗口为参照点移动元素（固定定位特点）

2、粘性定位占有原先的位置（相对定位特点）

3、必须添加top、bottom、left、right其中一个才有效


当div距离可视窗口顶部为0时，div就固定了，不随页面滚动

堆叠顺序

1、作用：处理 已定位元素的 堆叠效果

2、默认堆叠效果

平级元素-后来者居上

子元素压在父元素之上-子压父

3、属性：z-index，取值：数值越大越靠上

4、注意

取值可以为负，取值为负时，当前元素会位于页面正常显示内容之下

z-index 是无法改变父子关系的堆叠顺序