欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS实例 >

CSS+DIV三种元素定位方式

 css中元素的定位

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

进阶CSS+DIV高手,要熟练掌握这三种元素定位方式,你知道几个?

 

float定位

float定位是css排版非常重要的手段,新手一定要多多练习熟练掌握。float定位属性值有三种left、right和默认值none。设置了元素向左(left)或者向右(right)浮动时,元素会向父元素的坐车或者右侧靠近。可以灵活运用浮动实现复杂的排版效果比如说“文字环绕”和“八仙过海”。另外可以使用clear:both属性消除上面对下面的排版影响。下图是一段简单的CSS+DIV代码,A是B、C和D的父元素,B元素使用了左float定位,C元素使用了有float定位,D元素使用了clear:both清除浮动影响。

进阶CSS+DIV高手,要熟练掌握这三种元素定位方式,你知道几个?

 

进阶CSS+DIV高手,要熟练掌握这三种元素定位方式,你知道几个?

 

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定位代码。

进阶CSS+DIV高手,要熟练掌握这三种元素定位方式,你知道几个?

 

z-index空间位置

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

进阶CSS+DIV高手,要熟练掌握这三种元素定位方式,你知道几个?

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s50799.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-26 07:18 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。