CSS_定位_网页布局总结_元素的显示与隐藏

简介: CSS_定位_网页布局总结_元素的显示与隐藏

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位 占有原先的位置 (相对定位特点)
  3. 必须添加 top 、left、right、bottom 其中一个才有效
    跟页面滚动搭配使用。 兼容性较差,IE 不支持。
    1.9 定位的总结
    定位模式 是否脱标 移动位置 是否常用
    static静态定位 否 不能使用边偏移 很少
    relative相对定位 否(占有位置) 相对自身位置移动 常用
    absolute绝对定位 是(不占有位置) 带有定位的父级 常用
    fixed固定定位 是(不占有位置) 浏览器可视区 常用
    sticky粘性定位 否(占有位置) 浏览器可视区 很少用
  4. 一定记住 相对定位、固定定位、绝对定位 两个大的特点: 1. 是否占有位置(脱标否) 2. 以谁为基准点移动位置
  5. 学习定位重点学会子绝父相。
    1.10 定位叠放次序 z-index
    在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)
    语法:
    ————————————————

                         版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    

原文链接:https://blog.csdn.net/2301_80636070/article/details/143263781

相关文章
|
7月前
|
前端开发 JavaScript 开发者
CSS隐藏元素的N种方法,你知道哪一种最适合你?
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
25 0
|
4月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
31 5
|
7月前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
7月前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
66 0
|
前端开发
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(一)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
前端开发 安全 容器
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图(二)
CSS基本知识之复合选择器、元素显示模式、背景图片位置,精灵图
|
前端开发 JavaScript 异构计算
CSS隐藏元素的几种方式
CSS隐藏元素的几种方式
247 0
|
前端开发
css隐藏元素的六种方法
css隐藏元素的六种方法
100 0
|
前端开发
CSS中有哪些隐藏页面元素的方法?
CSS中有哪些隐藏页面元素的方法?
103 0