css_20_定位

相对定位

  • 设置相对定位

给元素设置 position: relative 即可实现相对定位。
可以使用 left、right、top 、 bottom 四个属性调整位置。

  • 相对定位的参考点是相对自己原来的位置
  • 相对定位的特点:
    1.不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
    2.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。

定位的元素会盖在普通元素之上。
都发生定位的两个元素,后写的元素会盖在先写的元素之上。
left不能和right一起设置,top和bottom不能一起设置。

绝对定位

  • 设置绝对定位

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left、 right、 top、 bottom

  • 绝对定位的参考点是参考它的包含块。

包含块:
1.对于没有脱离文档流的元素:包含块就是父元素;
2.对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)。

  • 绝对定位元素的特点:
    1.脱离文档流,会对后面的兄弟元素、父元素有影响。
    2.left不能和right一起设置,top和bottom不能一起设置。
    3.绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
    4.无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素

举例:

    <style>.outer {width: 500px;background-color: skyblue;border: 1px solid black;padding: 20px;position: relative;}.box {width: 200px;height: 200px;font-size: 20px;}.box1 {background-color: #888;}.box2 {background-color: orange;position: absolute;top: 220px;left: 20px;}</style>

固定定位

  • 设置固定定位:

给元素设置 position: fixed 即可实现固定定位。
可以使用 left、right 、 top 、 bottom四个属性调整位置。

  • 固定定位的参考点:参考它的视口
  • 固定定位元素的特点
    1.脱离文档流,会对后面的兄弟元素、父元素有影响。
    2.left 不能和right一起设置,top和bottom不能一起设置。
    3.固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
    4.无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
    举例:
        .box2 {background-color: orange;position: fixed;bottom: 0;right: 0;}

粘性定位

  • 设置粘性定位

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left、 right、 top、 bottom 四个属性调整位置,不过最常用的是top值。

  • 粘性定位的参考点:离它最近的一个拥有"滚动机制"的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
  • 粘性定位元素的特点
    1.不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
    2.粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。

举例:

        .nav {background-color: skyblue;font-size: 40px;position: sticky;top: 0px;}

定位层级

1.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
2.如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
3.可以通过css属性 z-index调整元素的显示层级。
4. z-index 的属性值是数字,没有单位,值越大显示层级越高。
5.只有定位的元素设置 z-index 才有效。
6.如果z-index值大的元素,依然没有覆盖掉z-index值小的元素,那么请检查其包含块的层级。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习周记(第四十五周:Graphformer)2024.6.24~2024.6.30

目录 摘要ABSTRACT1 论文信息1.1 论文标题1.2 论文摘要1.3 论文引言1.4 论文贡献 2 论文模型2.1 问题定义2.2 模型架构2.2.1 自注意下采样模块&#xff08;Self-attention down-sampling module&#xff09;2.2.2 稀疏图自注意力机制&#xff08;Sparse graph self-attention m…

python自动移除excel文件密码(小工具)

安装 msoffcrypto-tool 使用pip命令安装: 打开命令行工具&#xff08;如终端、命令提示符或Powershell&#xff09;&#xff0c;然后输入以下命令来安装msoffcrypto-tool&#xff1a; pip install msoffcrypto-tool库&#xff0c;进行自动移除excel文件密码 import msoffcrypt…

【C++】using namespace std 到底什么意思

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文作为 JohnKi 的学习笔记&#xff0c;引用了部分大佬的案例 &#x1f4e2;未来很长&a…

新手练习项目 7:猜数字游戏

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#xff09; 目录 一、项目描述二、项目实现三、项目步骤四、项目扩展方向 更多项目内容&#xff0c;请关注我、订…

comsol学习笔记

comsol岩土力学与流固耦合的学习 comsol的相关视频教程 https://www.bilibili.com/video/BV1Cu4y1r7Gn/?spm_id_from333.337.search-card.all.click&vd_source02b2bad477a153eaeb9c48cbbedaf8df [这里面有讲解地应力平衡技术] https://www.bilibili.com/video/BV17C4y1j…

打靶记录——靶机medium_socnet

靶机下载地址 https://www.vulnhub.com/entry/boredhackerblog-social-network,454/ 打靶过程 由于靶机和我的Kali都处于同一个网段&#xff0c;所以使用arpscan二次发现技术来识别目标主机的IP地址 arpscan -l除了192.168.174.133&#xff0c;其他IP都是我VMware虚拟机正…

【Spring Boot】认识 JPA 的接口

认识 JPA 的接口 1.JPA 接口 JpaRepository2.分页排序接口 PagingAndSortingRepository3.数据操作接口 CrudRepository4.分页接口 Pageable 和 Page5.排序类 Sort JPA 提供了操作数据库的接口。在开发过程中继承和使用这些接口&#xff0c;可简化现有的持久化开发工作。可以使 …

springboot学习,如何用redission实现分布式锁

目录 一、springboot框架介绍二、redission是什么三、什么是分布式锁四、如何用redission实现分布式锁 一、springboot框架介绍 Spring Boot是一个开源的Java框架&#xff0c;由Pivotal团队&#xff08;现为VMware的一部分&#xff09;于2013年推出。它旨在简化Spring应用程序…

大数据面试题之Spark(1)

目录 Spark的任务执行流程 Spark的运行流程 Spark的作业运行流程是怎么样的? Spark的特点 Spark源码中的任务调度 Spark作业调度 Spark的架构 Spark的使用场景 Spark on standalone模型、YARN架构模型(画架构图) Spark的yarn-cluster涉及的参数有哪些? Spark提交jo…

横穿自动驾驶

如果有一条线&#xff0c;可以穿起来所有自动驾驶的核心模块&#xff0c;那么我感觉它就是最优化&#xff0c;选择优化变量、构造优化问题、求解优化问题&#xff0c;这几个步骤贯穿了自动驾驶的始终。 先从我的自身接触顺序写起。最开始做个一点深度学习&#xff0c;那还是20…

编码大模型系列:Meta创新的“代码编译优化”的LLM

鲁班号导读正式上线。移步“鲁班秘笈”&#xff0c;查阅更多内容。 大型语言模型 (LLM) 已在各种软件工程和编码任务中展现出卓越的能力。然而&#xff0c;它们在代码和编译器优化领域的应用仍未得到充分探索。训练LLM需要大量资源&#xff0c;需要大量的 GPU时间和大量的数据…

23、架构-服务网格之透明通信涅槃

通信成本 在现代分布式系统中&#xff0c;服务之间的通信是不可避免的。然而&#xff0c;这种通信带来了额外的复杂性和成本。传统的通信方式如RPC&#xff08;Remote Procedure Call&#xff09;和REST&#xff08;Representational State Transfer&#xff09;&#xff0c;虽…

Hive 实操案例五:统计每个类别中 Top10 的视频热度

一、数据表结构 视频表 t_video 字段注释描述videoId视频唯一 id&#xff08;String&#xff09;11 位字符串uploader视频上传者&#xff08;String&#xff09;上传视频的用户名 Stringage视频年龄&#xff08;int&#xff09;视频在平台上的整数天category视频类别&#xff0…

一个合理的前端应用文件结构

在大型应用中&#xff0c;最关键且最具挑战性的方面之一就是拥有一个良好且合理的文件结构。在考虑通过微前端将代码库拆分成多个应用之前&#xff0c;可以遵循一些步骤来改善项目级别的架构&#xff0c;并在您考虑这一路径时使过渡更容易。 我们的目标是应用某种模块化方法&am…

MSPM0G3507——定时器例程讲解4——timx_timer_mode_periodic

以下示例以周期模式配置TimerG并切换LED。周期从500ms开始&#xff0c;每次切换减少50ms&#xff0c;直到周期为100ms&#xff0c;然后重复。设备在等待中断时保持待机模式 #include "ti_msp_dl_config.h"/* ((32KHz / (321)) * 0.5s) 45 - 1 495 due to N1 ticks …

MySQL入门学习-MySQL日志.错误日志

错误日志是 MySQL 中一种记录服务器运行过程中错误信息的日志文件。它可以帮助管理员或开发人员快速定位和解决问题。 一、MySQL 中的错误日志具有以下特点&#xff1a; - 记录错误信息&#xff1a; 错误日志主要记录服务器在运行过程中发生的错误信息&#xff0c;包括但不限…

【算法 之选择排序 原理及案例】

选择排序&#xff08;Selection Sort&#xff09; 是一种简单直观的排序算法。它的工作原理是&#xff1a;首先在未排序序列中找到最小&#xff08;或最大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小…

Memcached的API使用指南:常用操作与示例代码

Memcached 是一个高性能、分布式内存对象缓存系统&#xff0c;常用于加速动态Web应用程序&#xff0c;减轻数据库负载。本文将介绍如何使用Memcached的API进行常用操作&#xff0c;并提供示例代码。 1. 安装Memcached客户端库 在使用Memcached之前&#xff0c;需要安装相应的…

Qt中用QLabel创建状态灯

首先ui设计中分别创建了4个大灯和4个小灯。 编辑.h文件 #ifndef LED_H #define LED_H#include <QWidget> #include <QLabel>QT_BEGIN_NAMESPACE namespace Ui { class Led; } QT_END_NAMESPACEclass Led : public QWidget {Q_OBJECTpublic:Led(QWidget *parent n…

Spring MVC数据绑定和响应——复杂数据绑定(四)JSON数据绑定

一、消息转换器—HttpMessageConverter接口 客户端不同的请求&#xff0c;HttpServletRequest中数据的MediaType可能会不同&#xff0c;如果想将HttpServletRequest中的数据转换成指定对象&#xff0c;或者将对象转换成指定格式的数据&#xff0c;就需要使用对应的消息转换器来…