web前端-CSS-浮动，定位

web-CSS

1.浮动

文档流：文档中的标签在排列时所占的位置。将窗体自上而下分成一行行，并在每行中按从左向右的顺序排放标签。

浮动：使标签脱离原来的文档流，在父标签中浮动起来。

浮动属性：float(none不浮动，left向左浮动，right向右浮动)

.div{
	float<!-- (none不浮动，left向左浮动，right向右浮动) -->
}

块级标签和行级标签都可以浮动。

当一个行级标签浮动以后自动变成一个块级标签。

当一个块级标签浮动以后，宽度默认是内容的宽度。所以当漂浮一个块级标签时我们 都会为其指定一个宽度。

浮动带来的问题：浮动后的标签没有撑开夫标签，下面的标签会上移，影响网页布局(高度塌陷)

解决办法：1.给父标签设置具体高度。

​ 2.清除浮动，消除浮动后默认将父标签撑开与浮动标签一致。

<div style="clear: left;"></div>
<!-- 清除左浮动影响，right清除右浮动影响，both清除全部影响 -->

2.定位

1.相对定位：相对定位是以其原来位置为参照物移动，移动后原来位置还被占用(不脱离文档流)，相对定位不会改变标签类型，但是会提升一个层级。

开启相对定位，没有设置位置偏移量，位置不变。可以通过left,right,top,bottom。设置偏移量。

.img{
	position:relative;  
	<!-- 开启相对定位 -->
	left:1000px;
	<!-- 左边框距离完为止1000px -->
}

2.绝对定位：绝对定位是以离它最近的开启了定位的祖先标签移位，若没有祖先标签开启定位，则会以网页的边框为参照物。

开启绝对定位的标签，就会脱离原来的文档流。通过left,right,top,bottom设置偏移量,若没有设置，位置不变。

.div1{
    position:relative;<!--父标签开启相对定位-->
}

.div2{
    position:absolute;<!--子标签开启绝对定位-->
    left:100px;<!--设置子标签距离父标签左侧边框100px-->
}
</style>

<div id="div1">
	<div class="div2">
	</div>
</div>

一般情况下，开启了子标签的绝对定位就会开启父标签的相对定位。

3.z-index(设置标签的堆叠顺序)

如果定位标签的层级是一样，则下边的标签会盖住上边的。

通过z-index属性可以用来设置标签的层级。

可以为z-index指定一个正整数作为值，该值将会作为当前标签的层级

层级越高，越优先显示。

对于没有开启定位的标签不能使用z-index。

对于没有开启定位的标签，不能使用z-index。