CSS学习笔记之定位 3.8

Terry-98

已于 2022-03-10 14:31:09 修改

阅读量165

点赞数 2

文章标签： css 学习 css3

于 2022-03-08 20:22:13 首次发布

本文链接：https://blog.csdn.net/qq_36450483/article/details/123360844

版权

1 子绝父相

含义：子级是绝对定位的话，父级要用相对定位

重点：

① 子级绝对定位，不会占有位置，可放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

2 固定定位 fixed

固定定位 是元素固定于浏览器可视区的位置。

主要使用场景：如浏览器页面滚动时元素的位置不会改变。

语法：

选择器 { position: fixed; }

特点：

1. 以浏览器的可视窗口为参照点移动元素。

2. 固定定位不在占有原先的位置，也是脱标的。

若想固定在版心右侧位置，则：

1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置。

 .dj{
            position: fixed;
            top: 100px;
            left: 20px;
        }

3 粘性定位 sticky（了解）

粘性定位 可以被认为是相对定位和固定定位的混合。

语法：选择器 { position: sticky; top: 10px; }

特点：

1. 以浏览器的可视窗口为参照点移动元素）

2. 粘性定位占有原先的位置

3. 必须添加 top 、left、right、bottom 其中一个才有效

.nav {
            
            position: sticky;
            top: 0;
           
        }

4 定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 ( 占有位置 )	相对于自身位置移动	常用
absolute 绝对定位	是（不占有位置）	带有定位的父级	常用
fixed 固定定位	是（不占有位置）	浏览器可视区	常用
sticky 粘性定位	否 ( 占有位置 )	浏览器可视区	少

5 定位叠放次序

z-index 控制盒子的前后次序 (z轴)

语法：

选择器 { z-index: 1; }

特点：

1、数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

2、如果属性值相同，则按照书写顺序，后来居上

3、数字后面不能加单位

4、只有定位的盒子才有 z-index 属性

6 定位拓展

6.1 绝对定位水平居中

注意：加了绝对定位的盒子不能通过 margin:0 auto 水平居中

方法：

1、left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

2、margin-left: -100px;：让盒子向左移动自身宽度的一半。

.box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
}