wordpress文章缩略,优化提升,广东全网推广,中国建造师网官网个人入口基本思想
定位(position)允许定义元素框相对于其正常位置应该出现的位置#xff0c;或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 使用top,bottom,left,right属性的属性值来设置元素的位置。
作用
在正常情况下#xff0c;可以让一个元素覆盖在另外一个元素上…基本思想
定位(position)允许定义元素框相对于其正常位置应该出现的位置或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 使用top,bottom,left,right属性的属性值来设置元素的位置。
作用
在正常情况下可以让一个元素覆盖在另外一个元素上面可以移动一个元素的位置可以固定某个容器在浏览器窗口的某个位置不动可以做吸顶效果比如百度新闻的导航
五种定位方式
1、静态定位 static 默认值。没有定位元素出现在正常的页面流中忽略 top, bottom, left, right 或者 z-index 声明 如果省略position属性浏览器就认为该元素是static定位
2、相对定位 relative
如果没有定位偏移量对元素本身没有任何影响不使元素脱离文档流不影响其他元素布局移动位置的时候参照物是当前元素自身初始位置的左上角多个元素相对定位之后如果没有移动位置那么他们之间就不会覆盖现象。如果移动了位置那么后面的元素就是会覆盖前面的元素可以通过z-index改变层叠顺序
没有使用相对定位时 效果 此时给第二个div添加相对定位的声明 效果 第二个div则相对于初始的位置向左、向下分别移动50px。 注意其原先的位置还是会保留的也就是未脱离文档流。
3、绝对定位 absolute
元素脱离文档流使内联元素支持宽高使块元素默认宽根据内容决定如果祖先元素有定位绝对、相对、固定则相对于祖先元素发生偏移;祖先元素没有定位则相对于整个文档左上角发生偏移如果多个元素同时给了绝对定位他们之间的层叠顺序是结构在后的元素在最上面.可以通过index改变层叠顺序
不使用绝对定位 效果 此时给最外层的父元素div添加相对定位也可以是绝对、固定给第二个子元素添加绝对定位 效果 很明显可以看到第二个div此时移动的参照物是添加了相对定位的父元素而且脱离了文档流处于正常文档流的第三个div上去了 注意点浮动也会使元素脱离文档流但是被浮动元素覆盖的元素若里面有文字内容那么文字则会环绕浮动元素周围显示。而被绝对定位元素覆盖的元素里面的文字便会被全覆盖不会环绕显示
4、固定定位 fixed
脱离文档流使内联元素支持宽高使块元素默认宽根据内容决定相对于整个浏览器窗口进行偏移不受浏览器滚动条的影响多个元素同时给了固定定位结构上后面的元素会盖在最上面固定定位的层叠顺序也可以用z-index改变
常用于右下角“返回顶部”、弹窗等。 不使用固定定位 效果 此时给红色边框的div添加固定定位 效果 很明显可以看到固定定位的元素的参照物是整个浏览器窗口而且也是脱离的正常的文档流处于正常文档流的蓝色边框div上去了之后该元素就固定在这个位置了拖动窗口的时候不再改变。
5、粘性定位 sticky
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)之后为固定定位(fixed)。 常用于用于页面滚动的时候的定位可以方便实现吸顶条的效果表格的表头锁定堆叠效果等 例如百度新闻的导航栏 当向下拖动滚动条的时候导航栏就会固定在顶部 注意
父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、right4个值之一否则只会处于相对定位父元素的高度不能低于sticky元素的高度sticky元素仅在其父元素内生效
