首页 > 其他分享 >css - 脱离文档流

css - 脱离文档流

时间:2023-10-08 23:08:15浏览次数:40  
标签:定位 层级 index 脱离 元素 相对 文档 css

CSS position定位&z-index层级

1. 定位position:

(1). 相对定位relative:

  • 元素相对定位: a. 相对于元素在文档流中原本的位置定位的 b. 不脱离文档流 c. 如果不设置偏移量,元素不会发生任何变化
  • 不改变元素性质(块级/内联元素)

(2). 绝对定位absolute:

  • 绝对定位的元素: a. 相对于最近开启定位的父元素定位,如果没有,则相对于窗口定位 b. 脱离文档流
  • 会改变元素性质,内联元素会转换为块元素

(3). 固定定位fixed:

  • 脱离文档流
  • 固定定位永远相对于窗口定位,不随滚动条滚动

(4). 默认值static:

  • 没有定位

2. 层级z-index:

  • 只有开启定位的元素才可以设置z-index
  • 属性值: a. 整数 b. 数值越大,层级越高,越靠前展示

标签:定位,层级,index,脱离,元素,相对,文档,css
From: https://blog.51cto.com/u_16251183/7762886

相关文章

  • es - 更新文档
    5.更新文档:(1).整个文档相同的key覆盖:curl-XPUT"localhost:9200/lib/user/1?pretty"-H'Content-Type:application/json'-d'{"name":"David","age":30,"interests":["music",&quo......
  • 软件开发项目文档系列之一文档综述
    前言在当今数字时代,软件项目已经成为企业和组织实现业务目标的关键工具。然而,要确保软件项目的成功,除了高质量的代码和卓越的技术团队之外,文档的重要性也不可忽视。软件项目文档是项目的桥梁,它们连接了项目的各个阶段,记录了关键信息,帮助各方了解项目的需求、设计、开发、测试和部......
  • css
     目录1.介绍css2.CSS语法3.CSS注释4.CSS中的颜色值5.CSS长度单位6.html引入CSS的三种方法  6.1行内样式(内联样式)  6.2 内嵌样式  6.3外部样式7.选择器  7.1标签选择器  7.2类选择器  7.3ID选择器  7.4通配所有元素......
  • css字体样式
     1.font-style设置字体样式属性值:  normal:指定⽂本字体样式为正常的字体  italic:指定⽂本字体样式为斜体。2.文字字体font-family只能引用系统自带的字体样式,如果需要其他别的字体,需要从外部下载调用引用外部字体  网站:https://font.chinaz.com/katongziti.......
  • 在 Less 中使用与 Less 内置函数同名的原生 CSS 函数
    参考资料calc()-CSS:层叠样式表|MDNGettingstarted-Escaping|Less.jsUsingTheCSSFunctioncalc()InsideTheLESSCSSPreprocessor问题描述在原生CSS中有以下的函数:calc()、max()、min()等,而在Less中也有同名的函数,使用的时候可能会冲突,无法得到需要的结......
  • 华为iStack、 CSS 、Eth-Trunk、 M-LAG
    一、iStack设备堆叠1、定义堆叠是指将多台支持堆叠的特性交换机设备组合在一起,从逻辑上组合成一台交换设备。2、为什么要使用堆叠技术?(3个优点)通过交换机堆叠,可以实现网络高可靠性和网络大量数据转发,同时简化网络管理。3、iStack基本概念角色(堆叠中所有的交换机都称为成员交换机)主......
  • css中的字体样式
    一.字体的样式font-style:"normal"正常font-style:"italic"斜体 二.字体的粗细font-weight:"bold/bolder";bold是粗体 font-weight:400;400,500为正常500<为粗体>400为细体 三.字体的家庭font-family可以自己外部引入字体 四.行高line-height:200px 使文......
  • css的认知与样式
    #1.介绍##目录- [1.介绍](#1-介绍)- [2.CSS语法](#2-CSS语法)- [3.CSS注释](#3-CSS注释)- [4.CSS中的颜色值](#4-CSS中的颜色值)- [5.CSS长度单位](#5-CSS长度单位)- [6.html引入CSS的三种方法](#6-html引入CSS的三种方法)- [6.1行内样......
  • DingTalk API 的使用技术文档
    前言DingTalk是由阿里巴巴集团推出的一款企业级即时通讯软件,主要用于沟通、协作和工作进展的管理。除了官方客户端外,DingTalk还提供了开放的API接口,可以让开发者基于DingTalk开发各种应用、机器人等。本文将介绍DingTalkAPI的使用方法和相关技术点。环境准备首先,你需要在......
  • CSS,position: relative用法
    展示图如下:使左边区域固定展示,不受子域名的影响,所以要使用相对定位position:relative相对定位一般使用父级菜单绝对定位使用如下:绝对定位一般使用子级菜单position:absolute悬浮遮盖其余位置  ......