电子商务网站系统建设进度安排,营销型网站制作培训,特种作业人员成绩查询,知识产权教育网站建设1、divcss中的定位position 最主要的两个属性#xff1a;absolute(绝对定位)、relative(相对定位) #xff08;1#xff09;absolute(绝对定位)#xff0c;位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流#xff0c;因此不占据空间。 #xff08;2#xff… 1、divcss中的定位position 最主要的两个属性absolute(绝对定位)、relative(相对定位) 1absolute(绝对定位)位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流因此不占据空间。 2relative(相对定位)定位是相对的那他是相对于什么呢参照物是什么 看代码
span stylefont-size:18px;style typetext/css#left{background:#cccccc;width:200px;height:200px;float:left;}#center{background:#eee;width:200px;height:200px;float:left;}#right{background:#666666;width:200px;height:200px;float:left;}
/stylediv idleft/divdiv idcenter/divdiv idright/div
/span 效果 2、relative(相对定位)给中间的div增加定位属性position:relative; top:10px; left:10px; 代码
span stylefont-size:18px;style typetext/css#left{background:#cccccc;width:200px;height:200px;float:left;}#center{background:#eee;width:200px;height:200px;float:left;position:relation;top:span stylefont-family:KaiTi_GB2312;1/span0px;left:span stylefont-family:KaiTi_GB2312;1/span0px;}#right{background:#666666;width:200px;height:200px;float:left;}
/stylediv idleft/divdiv idcenter/divdiv idright/div/span 效果 结果很明显它现在移动的参照物就是它原来所占据的位置 注意位置属性 top、 right 、left 、bottom 只能引用相邻的两个边不能只用上下或者只用左右。 3、absolute(绝对定位)给中间的div增加定位属性position:absolute; top:30px; left:30px; 代码 span stylefont-size:18px;style typetext/css#left{background:#cccccc;width:200px;height:200px;float:left;}#center{background:#eee;width:200px;height:200px;float:left;position:absolute;top:30px;left:30px;}#right{background:#666666;width:200px;height:200px;float:left;}
/style/span 效果 结果 发现中间的div脱离了文档流右侧的和左侧div挨着了现在中间的div的位置是从浏览器的左上角开始计算位置即向下移动30像素向右移动30像素。现在就涉及到一个层级的关系设置div的z-index属性数值越大的层显示在最上边。 想要了解更多的小伙伴们可以点击这里 CSS 相对|绝对(relative/absolute)定位系列一
