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

相关文章
|
8月前
|
前端开发 JavaScript 开发者
CSS隐藏元素的N种方法,你知道哪一种最适合你?
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
3月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
28 0
|
5月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
35 5
|
6月前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
179 3
|
8月前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
8月前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
127 0
|
8月前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
71 0
|
前端开发 JavaScript 异构计算
CSS隐藏元素的几种方式
CSS隐藏元素的几种方式
258 0
|
前端开发
css隐藏元素的六种方法
css隐藏元素的六种方法
107 0
|
前端开发
CSS中有哪些隐藏页面元素的方法?
CSS中有哪些隐藏页面元素的方法?
107 0