繁芜的网页布局都是通过各种网页元素灵巧定位实现的,网页中的各种元素定位都有自己的特点。
本日为大家聊一下css中常用的三种定位方法。
这里说的定位不是table排版的,而是通过DIV+CSS的方法对页面中的块元素的定位。

float定位

float定位是css排版非常主要的手段,新手一定要多多练习闇练节制。
float定位属性值有三种left、right和默认值none。
设置了元素向左(left)或者向右(right)浮动时,元素会向父元素的坐车或者右侧靠近。
可以灵巧利用浮动实现繁芜的排版效果比如说“笔墨环抱”和“八仙过海”。
其余可以利用clear:both属性肃清上面对下面的排版影响。
下图是一段大略的CSS+DIV代码,A是B、C和D的父元素,B元素利用了左float定位,C元素利用了有float定位,D元素利用了clear:both打消浮动影响。

htmldiv定位进阶CSSDIV高手要闇练控制这三种元素定位方法你知道几个 React

position定位

position定位于float一样,也是css排版中常常用到的,从字面上理解便是指定块元素的位置,它是相对付父元素的位置和相对其他自身该当在的位置。
position有static、absolute、inherit、relative和fixed五个值。
static是默认值,它表示元素保持在原来的位置上,没有任何移动效果。
absolute:它表示元素天生绝对定位,可以设置top、right、bottom、left四个值来调度元素的位置。
relative:它表示天生相对定位的元素,相对付其正常位置进行定位。
fixed:它表示天生绝对定位的元素,相对付浏览器窗口进行定位,也可以设置top、right、bottom、left四个值来调度元素的位置。
inherit:规定从父元素继续 position 属性的值。
须要把稳的是IE浏览器不支持position定位的inherit属性。
下图是一段大略的absolute定位代码。

z-index空间位置

z-index属性用于调度定位是重叠快的高下位置,你可以想象为x-y轴,垂直于页面为z轴,z-index值越大他的位置就越往上。
z-index值为整数,可以是负数,元素设置了position涌现重叠时,为了担保排班效果,须要设置它们的z-index属性值。
默认的z-index属性值是0,两个元素z-index都一样将保持原来的空间位置不变。

关于css中的元素定位到这,如果你是大神可以忽略这篇文章,每天学习一个知识点,逐日寄语-“成功源于不懈的努力。