css 定位详解

Posted 2021-02-18 ericblog1992

定位模式
static 静态定位-> 几乎不用

relative 相对定位
1 相对于原来在标准流中的位置来说的;
2 在原来标准流的区域继续占有,后面盒子仍然以标准流方式对待它， 后面盒子不会动
相对定位 水平居中方法:
(1) margin : 0 auto；

absolute 绝对定位: 是元素带有定位的父级元素来 移动位置
1 完全托标----完全不占位置
2 父元素没有定位，则浏览器为准定位
子绝父相 -》 子元素绝对定位，父元素相对定位

绝对定位水平居中方法:
(1) left:50%;
(2) margin-left: -100px; : 让盒子向左移动 自身宽度的一半, 负值

fixed 固定定位
1 完全托标----完全不占位置
2 只认浏览器的可视窗口---- 浏览器可视窗口 + 边偏移属性 来设置元素的位置
(1) 跟父元素没有任何关系
(2) 不跟随滚动条滚动
定位 = 定位模式 + 边偏移

叠放顺序
z-index 特性：
1 属性值：正整数 负整数 或 0，数值越大，盒子越靠上
2 数字后面不能加单位
3 只能应用于 相对定位 ，绝对定位 和固定定位的元素， 其他标准流，浮动和静态定位无效.

绝对定位改变display属性
/*块级元素 不给width 默认通栏显示*/
/* 1 利用 display inline-block 行内块不给 width 默认的宽度就是内容的宽度*/
/*display: inline-block;*/

/* 2 浮动, 也能转换*/
/*float: left;*/

/*3. 绝对定位(固定定位) 也能转换 */
/*position: absolute;*/
/*position: fixed;*/

height: 100px;
background-color: pink;
padding: 20px;

所以说: 一个行内的盒子，如果加了浮动，固定定位 和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等

绝对定位和浮动不会触发外边距合并