目录
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS的定位方法和叠放次序
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、使用步骤
static 静态定位 不脱标 不能使用偏移 很少使用
relative 相对定位 不脱标(占有位置) 相对于自身位置移动 常用
absolute 绝对定位 脱标(不占有位置) 带有定位的父级 常用
fixed 固定定位 脱标(不占有位置) 浏览器可视区 常用
sticky 粘性定位 不脱标(占有位置) 浏览器可视区 当前阶段少
在使用定位布局时 可能出现盒子重叠的情况。此时,可以使用z-index 来控制盒子的前后次序
选择器(z-index:1;)
数值可以是正整数 ,负整数或0 默认是auto 数值越大 盒子越靠上
如果属性值相同 则按照书写顺序 后来居上
绝对定位盒子居中算法
水平居中
1. left走父容器宽度的一半
2 margin 负值 往左边走 自己盒子宽度的一半
垂直居中
1top
2.margin
总结
相对定位 固定定位 绝对定位两个大的特点:1是否占有位置(脱标否)2,以谁为基准点移动位置
学习定位重点学会子绝父相
只有定位的盒子才会有Z-index属性
定位特殊性
绝对定位和固定定位也和浮动类似
1行内元素添加绝对或固定定位。可以直接设计高度和宽度
2块级元素添加绝对或固定定位 如果不给宽度或高度 默认大小是内容的大小
脱标的盒子不会触发外边距合并
绝对定位和固定定位会完全压住盒子
浮动元素不同,只会压住他下面标准流的盒子,但是不会压住下面标准盒子里面的内容
浮动之所以不会压住文字,因为浮动产的目的是为了做文字环绕效果