【学习】CSS定位

最新推荐文章于 2024-07-08 11:32:20 发布

大魔魔魔头

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量57

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/weixin_44372086/article/details/123482741

版权

CSS定位笔记

布局是屏幕平面上的，而定位是垂直于屏幕的
border-box中，背景的范围是border外边沿围成的区域

position
- static 默认值 将元素放入它在文档布局流中的正常位置
- relative 相对定位 升起来，但不脱离文档流
  - 使用场景
    - 位移（很少用）
    - 给absolute元素做爸爸
  - 配合z-index
    - z-index:auto 默认值，不创建新层叠上下文
    - z-index:0/1/2
    - z-index:-1/-2
- absolute 绝对定位 定位基准是祖先里的非static
  - 使用场景
    - 脱离原来的位置，另起一层，比如说对话框的关闭按钮
    - 鼠标提示
  - 配合z-index
- fixed 固定定位 定位基准是viewport
  - 使用场景
    - 广告
    - 回到顶部按钮
  - 配合z-index
  - 手机上尽量不要使用这个属性
- sticky 粘滞定位
  - 它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
注意
- 如果写了absolute，一般都要补一个relative
- 如果写了absolute或者fixed，一定要补top和left
- sticky兼容性较差

z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
z-index只接受无单位索引值

假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

white-space:nowrap; 文字内容不准换行

大魔魔魔头

关注