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

相关文章
【已解决】TypeError: Cannot destructure property `createHash` of ‘undefined‘ or ‘null‘
【已解决】TypeError: Cannot destructure property `createHash` of ‘undefined‘ or ‘null‘
1391 1
|
存储 关系型数据库 MySQL
MySQL MVCC全面解读:掌握并发控制的核心机制
【10月更文挑战第15天】 在数据库管理系统中,MySQL的InnoDB存储引擎采用了一种称为MVCC(Multi-Version Concurrency Control,多版本并发控制)的技术来处理事务的并发访问。MVCC不仅提高了数据库的并发性能,还保证了事务的隔离性。本文将深入探讨MySQL中的MVCC机制,为你在面试中遇到的相关问题提供全面的解答。
903 2
|
分布式计算 大数据 分布式数据库
大数据-158 Apache Kylin 安装配置详解 集群模式启动(一)
大数据-158 Apache Kylin 安装配置详解 集群模式启动(一)
252 5
|
机器学习/深度学习 人工智能 测试技术
VisionTS:基于时间序列的图形构建高性能时间序列预测模型,利用图像信息进行时间序列预测
构建预训练时间序列模型的主要挑战在于获取高质量、多样化的时间序列数据。目前有两种方法:迁移学习LLM(如GPT-4或Llama)和从零训练。尽管迁移学习可行,但效果有限;从零训练则依赖大量数据,如MOIRAI、TimesFM和TTM等模型所示。为解决这一难题,研究人员提出利用图像数据进行时间序列预测。
876 11
VisionTS:基于时间序列的图形构建高性能时间序列预测模型,利用图像信息进行时间序列预测
|
机器学习/深度学习 并行计算 PyTorch
PyTorch与DistributedDataParallel:分布式训练入门指南
【8月更文第27天】随着深度学习模型变得越来越复杂,单一GPU已经无法满足训练大规模模型的需求。分布式训练成为了加速模型训练的关键技术之一。PyTorch 提供了多种工具来支持分布式训练,其中 DistributedDataParallel (DDP) 是一个非常受欢迎且易用的选择。本文将详细介绍如何使用 PyTorch 的 DDP 模块来进行分布式训练,并通过一个简单的示例来演示其使用方法。
2167 2
|
机器学习/深度学习 计算机视觉
【YOLOv8改进】CAFM(Convolution and Attention Fusion Module):卷积和注意力融合模块
**HCANet: 高光谱图像去噪新方法** HCANet是一种结合CNN与Transformer的深度学习模型,专为高光谱图像设计。它使用卷积注意力融合模块(CAFM)捕捉局部和全局特征,并通过多尺度前馈网络(MSFN)增强多尺度信息聚合,提升去噪效果。CAFM包含卷积和注意力分支,整合局部细节与长距离依赖。代码已开源:[GitHub](https://github.com/summitgao/HCANet)。
|
前端开发 关系型数据库 MySQL
使用 PHP 和 MySQL 实现留言板功能
使用 PHP 和 MySQL 实现留言板功能
544 0
|
存储 人工智能 NoSQL
阿里云服务器主要用途是干嘛的?对于大学生,可以用它做啥事?
阿里云服务器主要用途是干嘛的?对于大学生,可以用它做啥事?阿里云服务器提供了完善的云计算服务和开发环境,对于大学生来说是一个非常好的学习和实践平台。学习云计算可以提高大学生的实践能力和竞争力,阿里云服务器可以提供实际的实践环境,让大学生可以更加深入地了解云计算的原理和技术,并能够在此基础上进行开发和实践。
|
编译器 C语言
【C语言】小王带您轻松实现动态内存管理(简单易懂)
【C语言】小王带您轻松实现动态内存管理(简单易懂)
|
开发框架 前端开发 索引
读scss/sass实例项目带你入门
CSS(Cascading Style Sheet)级联样式表,前端必备技能之一。记得刚开始学习使用DIV+CSS布局的时候,有一个很有意思的网站《禅意花园》,通过模仿它开启了CSS设计之美。随着前端技术发展,纯CSS的弊端更加突显,就有后来的CSS预处理器SASS\SCSS、LESS、Stylus等。记得自己第一次接触SCSS的时候,就“一见钟情”,从此在项目中就没有用过纯CSS的方式了。
264 0