定位
组成
将盒子定在某个位置
定位 = 定位模式 + 边偏移
定位模式:指定一个元素在文档中的定位方式
定位模式
静态定位
默认定位方式,无定位的意思
选择器 { position : static;}
按照标准流摆放位置,没有边偏移
在布局中很少用到
static:静态定位
相对定位
position:relative:
top:100px;
left:100px;
元素移动位置的时候,对于他原来的位置
后面的盒子位置不变
relative:相对定位
绝对定位
相对祖先元素
绝对定位的特点
1.如果没有祖先元素或者祖先元素没有定位,以浏览器的文档进行定位
2.如果祖先元素有定位,以最近一级的有定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置(脱标)
absolute:绝对定位
口诀:
子绝父相!
1.子级绝对定位不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时,需要占用位置,因此父亲只能是相对定位
相对定位给绝对定位当爹的
固定定位
fixed:固定定位
页面滚动元素不动
特点:
以浏览器的可视窗口为参照点移动
跟父元素没有关系
不随滚动条滚动
不占有原先位置
小算法:
1.走浏览器宽度的一半
2.利用margin 走版心盒子宽度的一半距离
粘性定位
sticky
position:sticky;
top:10px;
特点
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须加top,left,right,bottom其中一个才有效
兼容性不太好
总结
static 静态 不能使用边偏移 不脱标
sticky 粘性 浏览器可视区 不脱标
relative 相对 相对自身位置移动 不脱标
absolute 绝对 带有定位的父级 脱标(不占有位置)
fixed 固定 浏览器可视区 脱标
定位的叠放次序
使用z-index来控制盒子的前后次序
语法
选择器{z-index: 1;}
1.数值随便,越大越靠上
2.数值相同按照书写顺序,后来居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性
拓展
绝对定位的盒子居中
不能通过margin : 0 auto来垂直居中
算法:
left:50%;父容器宽度的一半
margin-right:盒子宽度的一半
定位的特殊特性
行内元素添加绝对或者固定定位,可以直接设置高度和宽度
块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
不会触发外边距合并
绝对定位会压住盒子
浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
绝对定位会压住标准流的所有内容
浮动产生的目的产生文字环绕效果
并集选择器可以集体声明相同的样式
如果一个盒子既有left属性又有right属性,默认会执行left属性,同理,top和bottom执行top
网页布局总结
1.标准流
让盒子上下排列或者左右排列,垂直的块级盒子显示用标准流布局
2.浮动
让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
3.定位
元素的显示和隐藏
网站广告
display
display:none;隐藏对象
display:block; 转换为块级元素,显示元素的意思(与上面相反的意思)
visibility
visibility:visible;
visibility:hidden;占有原来位置
overflow
溢出的部分进行显示或隐藏
overflow:visible auto hidden scroll