前面学习了浮动样式, 今天我们来学习一下定位样式,
01. 定位样式的效果:
定位样式设置以后, 元素也会脱离标准文档流, 上浮, 其它元素按标准文档流的规则进行布局;
** 应用定位样式的元素, 在上浮后, 默认停靠在 Content 区域;
(注意一下, 元素在定位样式生效后, 并未生成文字环绕效果, 这一点与浮动样式是有区别的)
02. 兄弟元素同时应用定位样式时, 在视觉上, 后面上浮的元素会在先上浮元素的上面
(这一点与浮动不一样, 浮动样式中, 多个兄弟元素上浮后是在同一层级, 而且不相互遮挡, 但定位样式却存在遮挡情况)
03. 定位元素的层级关系控制:
定位样式应用后, 存在一个 "展示层级" 的概念, 默认展示层级为 0, 我们可以通过修改元素的展示层级来调整元素的展示先后关系,
这个展示层级通过 z-index 属性进行控制; (定位样式元素的位置在浮动样式元素之上)
04. 定位样式的坐标系规则
在元素应用定位样式后, 为了达到特定的布局效果, 如: 淘宝网页右侧的导航栏, 永远会展示在右侧, 不管我们如何滚动页面,
这个右侧导航栏永远是可见的,
我们可以通过 top, right, bottom, left 这四个属性来设置元素在坐标系中的相对位置,
(当然, 如果四个属性全设置的话, 只有 top , left 这二个参数生效, 因为这种情况下属于过份约束)
但在这里就存在一个问题, 这个坐标系在哪里????? 怎么设置???
--> 坐标系的设置:
** 若没有任何祖先类元素设置了坐标系, 则默认以浏览器窗口为坐标系进行布局;
** 通过 position:relative; 可以设置元素的坐标系标准; (即: 相对定位; 以父元素为基础做相对定位坐标系)
** 坐标系的设置, 一般是设置元素的祖先类元素;
** 如果元素的多个祖先类元素都设置了坐标系, 则以最近一个祖先元素为坐标标准;
** 在设置了祖先类元素为坐标系后, 元素的停靠位置由默认情况下的 content 区, 变成了 padding 区;
05. 对于定位样式, 同样可以使用 margin 属性, 但却限于一定的条件下面;
--> 默认直接支持支持 margin-top, margin-left; 而 margin-bottom, margin-left 无效果;
--> 在设置坐标系参数 bottom 而没有设置 top 时, margin-botton 生效;
在设置坐标系参数 right 而没有设置 left 时, margin-right 生效;
--> 而当设置 left 后, margin-right 失效;
当设置 top 后, margin-bottom 失效;
06. 定位样式的居中应用
从 05 内容中的录屏我们可以发现, 设置定位参数 left, top ,right, bottom 对 margin 是有影响的, 默认是将 top ,left 指定的位置点为元素对应的栅栏一样,
当设置相应边的 margin 时, 直接以此值指定的位置为基准点进行 margin 距离控制, 但是当设置了 right, bottom 属性后, 原来默认支持的 left, top 的标准点就无效了,
转而以 right, bottom 所指定的位置点为栅栏的边框了,(就好比你没弄, 我帮你弄个栅栏, 你自己弄了, 我就不管了 ^_^)
通过上述的规则, 定位样式有一种特殊的居中应用效果:
06. 定位样式中的固定定位
通过前面的学习, 我们已经了解到, 当一个元素使用了定位样式并应用到坐标系时, 默认是以浏览器窗口为坐标系标准的,
但如果这个元素的任何一个祖先类设置了相对定位以后, 元素将不再以窗口为坐标系了,
如果我们想实现不论什么时候都以窗口为坐标系时, 则需要应用到另外一个定位样式规则: 固定定位;
--> position:fixed;
来源: http://www.bubuko.com/infodetail-3070368.html