CSS -浮动-定位

CSS

文档流

标签在网页中的默认排放顺序

浮动

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

通过< float >设置 left向左浮动 none不浮动 right向右浮动

	
			.f1{
				float: left;
                <!---向左浮动--->
				background-color: cornflowerblue;
				height: 60px;
				padding: 2px 100px;
			}

行级标签和块级标签都可以浮动 一个行级标签浮动起来会变成块级标签 当行标签浮动起来之后 , 宽度默认是内容的宽度 所以一般情况下 , 会为其指定宽度

浮动标签不会撑开父标签

清除浮动

清除标签周围的浮动对标签的影响 其他标签位置不发生变化

<div style="clear"></div>

<!---left 忽略左侧浮动--->
<!---right 忽略右侧浮动--->
<!--- both 忽略全部浮动--->

定位

允许标签相对于其他正常位置 或者相对于一个父标签 , 另一个标签 , 浏览器窗口本身而出现的位置

相对定位

相对于起点移动 , 移动后原来的位置还被占用着

.n1{
				background-color: #0000FF;
				width: 100px;
				height: 100px;
    <!---开启相对定位
        距离顶部0px
        距离左边0px
    
    --->    
				position: relative;
				top: 0px;
				left: 0px;
				
			}

相对定位的特点

开启相对定位后 , 不设置偏移量 , 标签不会发生任何变化

相对定位是相对于原来在文档流中的原来位置进行定位

相对定位的标签不会脱离原来的文档流

不会改变标签的性质

绝对定位

绝对定位不会占用空间,绝对定位会使标签浮动起来,视觉上会与其他标签重合

.n2{
				background-color:  #6495ED;
				width: 100px;
				height: 100px;
    <!---开启相对定位
    top left right  bottom 设置偏移量
    --->
				position: absolute;
				top: 30px;
				left: 30px;
			}

绝对定位的特点

标签会脱离原来的文档流

开启后如果不设置偏移量,标签的位置不会发生变化

开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位 如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位）

会将行级标签变为块级标签

z-index

可以设置标签的堆叠顺序----如果定位标签的层级是一样，下边的标签会盖住上边的标签

通过z-index属性可以用来设置标签的层级-------可以为z-index指定一个正整数作为值，该值将会作为当前标签的层级 层级越高，越优先显示

必须开启定位的标签才可以使用z-index