当前位置: 首页 > news >正文

WEB安全之DIV CSS基础(四):三种定位和堆叠顺序

WEB安全之DIV CSS基础(四):三种定位和堆叠顺序

  • 定位
    • 静态定位
    • 固定定位
    • 相对定位
    • 绝对定位
  • 堆叠顺序

定位

  • 广告用到定位来做

静态定位

  • position
    static静态定位(不对它的位置进行改变,在哪里就在那里)
    默认值。没有定位,元素出现在正常的流中(忽略 top,bottom, left, right 或者z-index 声明)。

固定定位

  • fixed固定定位(参照物–浏览器窗口)—做 弹窗广告用到
    生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。

相对定位

  • relative(相对定位 )(参照物以他本身)
    生成相对定位的元素,相对于其正常位置进行定位。

绝对定位

  • absolute(绝对定位)(除了static都可以,找到参照物–>与它最近的已经有定位的父元素进行定位)
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
  • 在这里插入图片描述
    在这里插入图片描述
  • 静态定位
    在这里插入图片描述
    在这里插入图片描述
  • 固定定位(参照物是浏览器)
    在这里插入图片描述
    在这里插入图片描述
  • 相对定位
    在这里插入图片描述
    在这里插入图片描述
  • 绝对定位
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

堆叠顺序

  • z-index

  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
    在这里插入图片描述在这里插入图片描述

在这里插入图片描述

  • 2>1,黄色在前面
    在这里插入图片描述
    在这里插入图片描述
  • 黄色设为-1,会在蓝色下面(看不到)
    在这里插入图片描述
    在这里插入图片描述

相关文章:

  • C++ -------- 类型转换
  • 【youcans 的图像处理学习课】11. 形态学图像处理(中)
  • 大二数据库实验-MySQL语句(Employee、Department、Salary)
  • 实验3 数据文件操作和异常处理
  • 【微信小程序】button和image组件的基本使用
  • 【吴恩达深度学习】——NLP和Word Embedding
  • 图解mysql(五)——日志篇
  • 图解mysql(六)——内存篇
  • 【数据库原理 | MySQL】 前世今生(入坑篇)
  • Python脚本在win10下开机自启动
  • docker安装rocketmq
  • 【C++】基础入门(三):引用超全整理
  • 【java_wxid项目】【第十四章】【Spring Cloud Stream集成】
  • python-pyecharts基础知识
  • 分类:概率生成模型 - 李宏毅机器学习笔记
  • 【前端学习】-粗谈选择器
  • Babel配置的不完全指南
  • create-react-app做的留言板
  • Invalidate和postInvalidate的区别
  • JAVA SE 6 GC调优笔记
  • JavaWeb(学习笔记二)
  • Java读取Properties文件的六种方法
  • Java知识点总结(JavaIO-打印流)
  • magento2项目上线注意事项
  • Map集合、散列表、红黑树介绍
  • node入门
  • oldjun 检测网站的经验
  • Python学习之路13-记分
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • 不上全站https的网站你们就等着被恶心死吧
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 诡异!React stopPropagation失灵
  • 每天一个设计模式之命令模式
  • 前端攻城师
  • 如何实现 font-size 的响应式
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 算法系列——算法入门之递归分而治之思想的实现
  • 微信端页面使用-webkit-box和绝对定位时,元素上移的问题
  • 一、python与pycharm的安装
  • 责任链模式的两种实现
  • ​决定德拉瓦州地区版图的关键历史事件
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • #经典论文 异质山坡的物理模型 2 有效导水率
  • (day 12)JavaScript学习笔记(数组3)
  • (第61天)多租户架构(CDB/PDB)
  • (二)Linux——Linux常用指令
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (免费领源码)Java#Springboot#mysql农产品销售管理系统47627-计算机毕业设计项目选题推荐
  • (亲测有效)解决windows11无法使用1500000波特率的问题
  • (四)库存超卖案例实战——优化redis分布式锁
  • (转)GCC在C语言中内嵌汇编 asm __volatile__
  • .gitignore
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
  • .Net8 Blazor 尝鲜