CSS之定位

目录

CSS定位

为什么需要定位

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
  2. 定位则是可以让盒子自由 的在某个盒子内移动位置 或者固定 屏幕中的某个位置,并且可以压住其他盒子

定位组成

将盒子定在某个位置,也是在拜访盒子
定位 = 定位模式 + 边位移
定位模式 用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置

  • 定位模式属性position:

  • 边偏移属性:

  1. 静态定位static(了解):
    按标准流特性定位,无边偏移量 ,用的少
    语法格式:

    选择器 {
    position:static;
    }

  2. 相对定位relative(重要)
    特点:
    ① 移动位置时,相对于它原来的位置
    ② 原来在标准流的位置继续占有,即不脱标 ,保留原来位置
    语法格式:

    选择器 {
    position:static;
    }

eg:

div {
    position:static;
    //意思为相对于原来的位置向下移动100像素
    top:100px;
}
  1. 绝对定位absolute(重要)
    在移动时相对于它的祖先来说
    语法格式:

    选择器 {
    position:absolute;
    }

特点:

① 如果没有父元素或祖先元素没有定位,则以浏览器为准定位

② 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级 的有定位的祖先元素为参考点移动位置

③ 绝对定位不再占有原来的位置,即脱标

子绝父相

子级是绝对定位的话,父级要用相对定位

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

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

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

如果父盒子不需要占有位置时,也会用到子绝父绝

  1. 固定定位fixed(重要)

元素固定在浏览器可视区 的位置

特点:

① 以浏览器的可视窗口为参照点移动元素,和父元素没关系,不随滚动条滚动

脱标 ,不保留原来位置

小技巧:固定在版心右侧位置

① 让固定定位的盒子left:50%,走到浏览器可视区的一半位置

② 让固定定位的盒子margin-left:版心宽度一般的距离,多走版心宽度一半的位置

  1. 粘性定位sticky(了解):

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

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

不脱标 ,保留原来位置

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

兼容性差,IE不支持

  1. 总结

定位的叠放顺序

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

tips:

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

  2. 如果数值相同,则后来者居上

  3. 数字后不能加单位

  4. 只有定位的盒子才有z-index属性
    语法格式:

    选择器 {
    z-index: 1;
    }

拓展

  1. 绝对/固定定位的盒子居中:
    加了绝对定位的盒子不能通过margin:0 auto;水平居中
    语法格式

    选择器 {
    position: absolute;
    left: 50%;
    margin-left: -45px;
    width: 90px;
    height: 90px;
    }

  2. 定位特殊特性
    ① 行内元素添加绝对或固定定位,可直接设置宽度和高度
    ② 块级元素添加绝对或固定定位,宽度和高度默认是内容的宽度和高度

  3. 脱标的盒子不会触发外边距塌陷问题

  4. 决定定位、固定定位会完全压住盒子
    浮动只会压住它下面的盒子,不会压住文字,可做文字环绕 ,但定位会压住文字

相关推荐
学不会•34 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架