定位
定位的应用场景和基本原理
定位的原理
-
在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性,允许定义标签框相对于其正常位置应该出现的位置,或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置
position
-
static 默认 静态定位
-
-
默认的定位位置,不写就是静态定位
-
-
relative 相对定位
-
-
相对于自己本身移动(原来的位置保持不变,也不占用新的位置,不会影响页面布局)
-
-
absolute 绝对定位
-
-
子绝父相(当找不到父标签有相对定位的时候,就会继续向上找)
-
相对于父标签(父标签相对定位,子标签绝对定位)
-
脱离文档流也脱离文本流,也就是说图片,文字,输入框会到绝对定位下面
-
-
fixed 固定定位
-
-
相对于浏览器窗口
-
不会随着滚动条滚动
-
总结一下position
定位 | 是否脱标 | 参考点 | 参数 |
---|---|---|---|
static | 否 | 无 | |
relative | 否 | 自己本身 | left,right,top,bottom |
absolute | 是 | 父标签(子绝父相) | left,right,top,bottom |
fixed | 是 | 浏览器窗口 | left,right,top,bottom |
定位的技巧与层级关系
居中技巧
-
1、方案 1: top:50% left:50% margin-top:当前盒子高度的一半 margin-left :当前盒子宽度的一半
<style>
.wrap {
width: 600px;
height: 600px;
border: 1px solid;
position: relative;
}
.box {
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
/* top:50% left:50% margin-top:当前盒子高度的一半 margin-left :当前盒子宽度的一半*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
2、方案 2 margin:auto 实现绝对定位元素的居中(该方法兼容 ie8 以上浏览器)。 此方案代码关键点: (1)上下左右均 0 位置定位; (2)margin: auto。
<style> .wrap { width: 600px; height: 600px; border: 1px solid; position: relative; } .box { width: 200px; height: 200px; background-color: lightblue; position: absolute; /* 上下左右值为0,加上 margin: auto; */ top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style>
定位标签的层级属性 z-index
-
1、标签的定位与文档流无关,所以它们可以覆盖页面上的其它标签;
-
2、z-index 属性指定了一个标签的堆叠顺序;
-
3、具有更高堆叠顺序的标签总是在较低的堆叠顺序标签的前面;
-
4、如果两个定位标签重叠,没有指定 z - index,那么默认值都是 0,最后定位在 HTML 代码中的标签将被 显示在最前面。数值越大,层级越高。
浮动和定位的对比
-
浮动的元素脱离文档流,但是不会脱离文本流(文字、图片、表单元素不会被浮动元素覆盖,会围绕浮动的元素排列)
-
定位的元素既脱离文档流,又脱离文本流,可以实现元素之间真正的层级关系
脱离文档流的元素的特点
-
float:left;
-
float:right;
-
position:absolute;
-
position:fixed;
-
脱离文档流的元素不再区分行内或者块级,默认宽度都由内容撑开,都可以设置宽高及所有盒模型属性
多种透明
-
transparent;全透明
-
rgba(0,0,0,0.5); 兼容性:IE6、7、8 不支持,IE9 及以上版本和标准浏览器都支持。
-
opacity:0.5; 元素整体透明(元素本身的颜色以及内部的所有内容都透明) 0 表示全透明 1表示不透明 0.X 半透明 ,兼容性:IE6、7、8 不支持,IE9 及以上版本和标准浏览器都支持。
-
filter:alpha(opacity=50); IE浏览器专属透明滤镜
BFC (Block Formatting Context) 块级格式化上下文
-
什么是bfc?
-
-
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了 其子标签如何定位,以及与其他标签的相互关系和作用。
-
BFC块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与, 该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
-
-
怎样生成BFC
-
-
根标签
-
float的值不为none
-
overflow 的值不为 visible
-
display 的值为 inline-block
-
position 的值为 absolute 或 fixed
-
-
BFC的特性
-
垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin会发生重叠。
-
每个标签的左外边距与包含块的左边界相接触(从左向右),即使浮动标签也是如此。
-
BFC 的区域不会与 float 的标签区域重叠。(不包括固定定位方法)
-
计算BFC的髙度时,浮动子标签也参与计算。
-
BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签, 反之亦然。
-
-
BFC解决的问题
-
-
外边距塌陷
-
清浮动
-
两栏或者三栏自适应布局 (只能用overflow:hidden)设置overflow:hidden;的目的是让center盒子溢出隐藏,如果不设置,它多余的部分就在left和right的下面。
-