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

css总结1:position定位:absolute/relative/fixed

1 【Positioning(定位)】

Positioning作用:指定了元素的定位类型。position包括四个值:static,relative,fixed,absolute。

css定位解析:元素可以使用的顶部top,底部bottom,左侧left和右侧right属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

 

2 【position四大值介绍

2-1static 定位

解释:HTML元素的默认值,即没有定位,元素出现在正常的流中。即:元素不可受到top, bottom, left, right的影响。

 

2-2【fixed 定位】

解释:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动:

   p.pos_fixed{position:fixed; top:30px; right:5px;}

运行结果:              

   

           图1:浏览器滚动前:                                    图2:浏览器滚动后:   

因此:Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

 

2-3【relative 定位】

解释1:相对定位元素的定位是相对其正常位置。

解释2:可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。

 

注意:相对定位元素经常被用来作为绝对定位元素的容器块。

 

2-4【absolute 定位】

解释1:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

注意:

absolute 定位使元素的位置与文档流无关,因此不占据空间。

absolute 定位的元素和其他元素重叠。

 

2-5【重叠的元素】

      元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)

 一个元素可以有正数或负数的堆叠顺序:

解释:具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

 

转载于:https://www.cnblogs.com/autoXingJY/p/8570112.html

相关文章:

  • zzw原创_非root用户启动apache的问题解决(非root用户启动apache的1024以下端口)
  • SQL循环语句 详解
  • OpenCV问题集锦
  • 20154327 Exp1 PC平台逆向破解
  • ios 通知与通知传值2018.03.17
  • 20155307《网络对抗》PC平台逆向破解(二)
  • 273. Integer to English Words
  • DevOps是一种文化,不是角色!
  • 00004、python+selenium 的三种时间等待方式
  • SQL SERVER存储过程一
  • HTML中nbsp; ensp; emsp; thinsp;等6种空白空格的区别
  • P1280 尼克的任务
  • 动态代理和AOP
  • php 实现SFTP上传文件
  • WordCount项目总结
  • hexo+github搭建个人博客
  • JS 中的深拷贝与浅拷贝
  • 【跃迁之路】【463天】刻意练习系列222(2018.05.14)
  • 07.Android之多媒体问题
  • Computed property XXX was assigned to but it has no setter
  • docker python 配置
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • java小心机(3)| 浅析finalize()
  • js递归,无限分级树形折叠菜单
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • Next.js之基础概念(二)
  • PermissionScope Swift4 兼容问题
  • react 代码优化(一) ——事件处理
  • SAP云平台运行环境Cloud Foundry和Neo的区别
  • session共享问题解决方案
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • vue中实现单选
  • 纯 javascript 半自动式下滑一定高度,导航栏固定
  • 动态魔术使用DBMS_SQL
  • 分享一份非常强势的Android面试题
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 用mpvue开发微信小程序
  • ionic入门之数据绑定显示-1
  • Prometheus VS InfluxDB
  • Unity3D - 异步加载游戏场景与异步加载游戏资源进度条 ...
  • 阿里云API、SDK和CLI应用实践方案
  • ​​​​​​​​​​​​​​Γ函数
  • ​520就是要宠粉,你的心头书我买单
  • ​油烟净化器电源安全,保障健康餐饮生活
  • #stm32整理(一)flash读写
  • (4.10~4.16)
  • (二)linux使用docker容器运行mysql
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • .NET DataGridView数据绑定说明
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(白虎组)
  • [ IO.File ] FileSystemWatcher
  • [ vulhub漏洞复现篇 ] JBOSS AS 5.x/6.x反序列化远程代码执行漏洞CVE-2017-12149
  • [4.9福建四校联考]
  • [AUTOSAR][诊断管理][ECU][$37] 请求退出传输。终止数据传输的(上传/下载)