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

position定位的小问题

css中position定位有四个属性,分别是:static、fixed、relative、absolute

其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序;

fixed是固定定位,和absolute定位不同的是,设置为固定定位的元素不会随页面滚动而改变位置,所以经常用在登录框和导航中。

relative,相对定位,相对元素原来的位置进行定位。脱离文档流。

absolute,绝对定位,需要一个父元素作为参考,并且父元素设置不能为static。如果无父元素则默认为body元素。脱离文档流。

几个属性的概念都比较简单,下面通过代码效果讲解一下需要注意的问题:

如上图所示,从左到头依次是定位为static、fixed、relative、absolute的元素。

需要提醒的是,在样式中设置了body的padding值为30px

其中,定位为static的元素尽管设置了偏移量,但是其位置仍然和标准的文档流无任何区别,即偏移量是无效的。

定位为fixed的元素相对浏览器进行定位,所以可以发现尽管设置了body的padding为30px,但是当给元素进行固定定位时,会忽略页面的padding值,始终根据浏览器窗口的位置进行定位

另外一个问题是,定位为fixed的元素自动拥有了z-index的偏移量,即脱离文档流,浮动在其他元素的上方。所以当滚动页面时会发现后面的元素会从其下方穿过。

定位为relative的元素相对元素原来的位置(处于标准文档流中的位置)进行定位,所以仍会受body的padding值的影响。

定位为absolute的元素需要有定位不为static的元素进行参照定位,其位置相对与当前页面固定,但是随着浏览页面的滚动,其位置会跟着滚动,这也是和定位为fixed的元素的区别。

关于position定位的小问题还有很多,相信今后的学习和工作中还会再遇到,所以还会再补充。

转载于:https://www.cnblogs.com/wx1993/p/4876963.html

相关文章:

  • 分析一下云ERP与本地ERP相比区别在哪里
  • Skia深入分析5——skia文字绘制的实现
  • Linux下Tomcat的安装配置
  • FAT32,NTFS,EXT3,支持的最大分区和单个文件大小?
  • leetcode先刷_Valid Sudoku
  • [译] 怎样写一个基础的编译器
  • 攻城记:Thinkphp框架的项目规划总结和踩坑经验
  • POJ 3421 X-factor Chains(构造)
  • Apache Tez 介绍(译)
  • LinkedList的用法小结
  • 在linux下配置静态IP
  • TotoiseSVN基本用法
  • android studio 无法在可视化页面预览布局文件
  • ubuntu php mysql
  • 这些年,这些挖掘机算法,这些反思
  • [iOS]Core Data浅析一 -- 启用Core Data
  • exif信息对照
  • HTML5新特性总结
  • Java Agent 学习笔记
  • Javascript 原型链
  • java多线程
  • java中具有继承关系的类及其对象初始化顺序
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • Vue ES6 Jade Scss Webpack Gulp
  • Vue 重置组件到初始状态
  • Web Storage相关
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 给Prometheus造假数据的方法
  • 关于springcloud Gateway中的限流
  • 一、python与pycharm的安装
  • mysql面试题分组并合并列
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • # Maven错误Error executing Maven
  • #NOIP 2014# day.2 T2 寻找道路
  • #我与Java虚拟机的故事#连载09:面试大厂逃不过的JVM
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (二十一)devops持续集成开发——使用jenkins的Docker Pipeline插件完成docker项目的pipeline流水线发布
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (附源码)spring boot网络空间安全实验教学示范中心网站 毕业设计 111454
  • (附源码)springboot 智能停车场系统 毕业设计065415
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • (转)C语言家族扩展收藏 (转)C语言家族扩展
  • (转)Mysql的优化设置
  • (转)原始图像数据和PDF中的图像数据
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .Net 高效开发之不可错过的实用工具
  • .NET/C# 编译期能确定的字符串会在字符串暂存池中不会被 GC 垃圾回收掉
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • .net快速开发框架源码分享
  • [ vulhub漏洞复现篇 ] Apache Flink目录遍历(CVE-2020-17519)
  • [ 代码审计篇 ] 代码审计案例详解(一) SQL注入代码审计案例
  • [ 数据结构 - C++]红黑树RBTree
  • [acwing周赛复盘] 第 69 场周赛20220917