05 CSS4(布局)课件.pptVIP

网站规划与设计—CSS定位属性 王斌 定位属性 定位属性position用于定义一个元素是否absolute（绝对)、relative（相对）、static（静态）、或者fixed（固定）。语法如下。 Position：static|absolute|fixed|relative static：Static值是元素的默认值，表示不使用定位属性定位，也就是盒子按照标准流或浮动方式布局。 fixed称为固定定位，它和绝对定位类似，只是总是以浏览器窗口为基准进行定位，但IE6浏览器不支持该属性值。(不用) 相对定位 relative：Relative使元素偏移一定的距离，偏移的方向及幅度由top、right、bottom和left偏移属性联合指定。 #mydiv { position: relative; left: 50%； top: 30px; } 偏移属性仅对设置了定位属性的元素有效 使用相对定位的盒子的位置定位依据常以标准流的排版方式为基础，然后使盒子相对于它在原来的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 相对定位举例 #mybox { position: relative; left: 20px; top: 20px; } 相对定位的特点 元素原来占据的位置仍然会保留，也就是说相对定位的元素未脱离标准流； 因为是使用了定位属性的元素，所以会和其他元素发生重叠。 绝对定位 absolute：absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位中。通过设置top、right、bottom和left的值，可以使绝对定位的元素放置到任何地方。 这意味着它们对其他元素的盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 注意：绝对定位是以他的包含框的边框内侧为基准进行定位，因此改变包含框的填充值padding不会对绝对定位元素的位置造成影响。 绝对定位的偏移值是指从它的包含框边框内侧到元素的外边界之间的距离，如果修改元素的margin值会影响元素内容的显示位置。如果不设置绝对定位元素的偏移值，那么它位于未设置绝对定位属性时在标准流中的初始位置 绝对定位－设置包含框 但要注意的是，设置为绝对定位（position:absolute;）的元素，并非总是以浏览器窗口为基准进行定位。实际上，绝对定位元素是以它的包含框为基准进行定位的，所谓包含框是指距离它最近的设置了定位属性的父级元素的盒子。如果它所有的父级元素都没设置定位属性，那么包含框就是浏览器窗口 我们对em元素的父级元素p设置定位属性，使p元素成为em元素的包含框，这时，em元素就不再以浏览器窗口为基准进行定位了，而是以它的包含框p元素的盒子为基准进行定位， 绝对定位－不设置包含框 em { background-color: #0099FF; position:absolute; left: 60px； top: 30px; } 绝对定位－设置包含框 p { background-color: #dbfdba; padding: 25px; position:relative; border: 2px solid #6c4788; } em { background-color: #0099FF; position:absolute; left: 60px; top: 40px;} 绝对定位－以包含框为基准定位 绝对定位总结 左图为不设置包含框，右图为设置包含框 相对定位和绝对定位的比较 z-index属性 z-index属性用于调整定位时重叠块之间的上下位置。与它的名称一样，想象页面为x-y轴，那么垂直于页面的方向就为z轴，z-index值大的盒子位于值小的盒子的上方，可以通过设置z-index值改变盒子之间的重叠次序。默认的z-index值为0，当两个盒子的z-index值一样时，则保持原来的高低覆盖关系 z-index属性和偏移属性一样，只对设置了定位属性（position 属性值为 relative 或 absolute 或 fixed）的元素有效。 z-index属性 左边未设置z-index属性，右边设置了 浮动属性 浮动属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式。其语法如下。 float：none | left | right 例如： #Divtest1 { height: 200px; width: 200px; background-color: #ff0000; float: left; } #Divtest2 { background-color: #ffff00; width: 300px; h