zhangliang, Author at 阴谋论_程序营

CSS属性的定位属性包含： 静态定位、相对定位、绝对定位、固定定位 什么是定位属性？ 定位属性是使元素显示能够在页面任意位置的CSS属性。 如何使用定位属性？ 定位的英文名称是position，position属性来实现元素定位。 定位方式有4个，分别表示不同的定位类型。 基本语法格式： position：属性值； CSS，position的属性值； *static 默认值，没有定位； *relative 相对定位； *absolute 绝对定位； *fixed 固定定位； 如何实现相对定位？ 相对的英文单词：relative。 基本语法格式： position：relative； 相对定位的特点： 1.占原位置空间 2.参照物是元素的初始位置 相对定位是元素相对于自身发生偏移的定位方式。 如何使用偏移属性？ 元素设置定位后，具有偏移属性：left，top，bottom，right属性。 偏移量是指元素距离参照物的距离 基本语法格式： left：属性值； top：属性值； bottom：属性值； right：属性值； top %或px 元素距离参照物上边的距离 bottom %或px 元素距离参照物下边的距离 left %或px 元素距离参照物左部的距离 right %或px 元素距离参照物右边的距离 如何实现绝对定位？ 绝对的英文单词是absolute 基本语法格式： position：absolute； 绝对定位的特点： 1.不占原位置的空间 2.参照物是body 绝对定位是相对于父元素发生偏移的定位方式。 绝对定位的参照物-有定位的父级元素 默认情况下，绝对定位的参照物是body 若给父级元素添加定位属性，则参照物为该父级元素 相对定位和绝对定位区别 绝对定位和相对定位共同点： *定位之后，都有left，top，right，bottom属性 *都有参照物 *都可以把元素调整到指定位置 绝对定位和相对定位的区别 *参照物不同 *绝对定位不占原位置空间，相对定位占原位置空间 如何实现固定定位？ 固定的英文单词：fixed 基本语法格式： position：fixed； 固定定位特点： 1.不占原位置的空间 2.偏移时参照物是浏览器窗口 固定定位是相对于浏览器窗口发生偏移的定位方式。 偏移量的设置技巧： 顶部：left：0；top； 左侧边栏：right：0；top：0； 底部：left：0；bottom：0； 离哪个放进近，就以哪个方向为坐标原点，设置偏移量 盒子的位置：固定定位，在页面中水平居中，垂直居中。 如何使用z-index属性？ z-index属性设置元素堆叠顺序的CSS属性。 基本语法格式： z-index：属性值； z-index属性的值： *数字：无单位的整数，可为负值 *auto：默认值 规律： *默认情况下，后来居上（后写的覆盖先写的） *值越大越靠上 *默认层是0层，默认值是auto position定位小结： relative 相对于自身原来的位置进行定位 absolute 相对于有定位的父元素进行定位 父级均无定位则相对于body进行定位 fixed 相对于浏览器窗口进行定位 static 静态定位（默认值） 知识总结： 排版技巧：从外及里、由左及右、由上到下 定位技巧：小图标 相对定位于绝对定位结合 侧边栏 固定定位 position属性： relative 相对定位 absolute 绝对定位 fixed 固定定位 static 静态定位 偏移量： top 上侧 left 左侧 right 右侧 bottom 下侧 应用案例： 弹出层 遮罩层 关闭按钮层 侧右边栏层

zhangliang的文章