html css position,[CSS]CSS Position 详解

一. CSS position 属性介绍

CSS中position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。有static,relative,absolute和fixed四种取值,默认是static。

二. position: static

static:没有定位,元素出现在正常的文档流中,忽略left,right,top,bottom和z-index。

bVbaskQ?w=2134&h=1282

所以对元素position属性设定static时,left属性不起作用,但是元素出现在正常的流中。

三. position: fixed

fixed:生成固定定位的元素,相对于浏览器窗口定位,即浏览器窗口滚动也不会影响元素位置,元素的位置与文档流无关,因此不占据空间,可能会和其他元素发生重叠。

bVbasrz?w=2134&h=1286

窗口滚动不会影响content元素位置,content元素一直在contaniner元素的右下角。

四. position: relative

reletive:元素相对其自己正常位置定位,元素在正常的文档流中。

bVbaswk?w=2138&h=1280

没有设置left和top时的正常位置。

bVbaswr?w=2140&h=1286

设置了left和top属性,元素位置移动,向右移动50px,向下移动20px。但是元素预留的空间保持正常流动,也就是不会对其他元素产生影响。

五. position: absolute

absolute:元素绝对定位,相对于static定位以外的第一个父元素,元素脱离文档流。

bVbathQ?w=2140&h=1286

所以会找到static定位以外的第一个父元素,因为span的父元素content和container都没有设置position属性,默认为static,找到的第一个父元素就为html

,相对于向左移动100px。

如果对content或container设置position属性为relative,absolute或fixed,span会相对于content或container来定位。

以下是三个例子,

bVbatjX?w=2130&h=1280

span元素的第一个position属性不为static的父元素是content,所以相对于content向左移动10px。

bVbatkn?w=2140&h=1286

当content属性设置为fixed时,span元素相对于content向左移动10px。

059a50a93da5d7a6ecd935a11799fed8.png

span元素第一个position属性不为static的父元素是container,所以相对于container向左移动10px。

六. 总结

position: static,元素出现在正常的流中,无法通过left,right,top和bottom设置元素定位。

position: fixed,元素脱离文档流,相对于浏览器窗口定位不变。

position: relative,元素出现在正常的流中,相对于其正常位置定位。

position: absolute,元素脱离文档流,相对于static以外的第一个父元素定位。

理解了position的属性,可以更好的设计页面和实现页面。

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

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

相关文章

基克的聚合 机器人_重做秒变神器!基克的聚合成辅助标配

导读:7.12版本登陆国服一周有余,在这次更新中有一件装备值得我们关注。它就是基克的聚合,乍一听你可能有点不熟悉,其实它就是之前基克的先驱重做之后的产物。今天笔者就要跟大家详细说说这件装备,它在改动之后俨然成为…

win2008无法用计算机名共享,Windows Server 2008 R2中文件共享

在网上找过很多次相关资料,还是自己整理一下吧。实践了才是自己的,只看永远是别人的。服务器:Server 2008 R2(IP:192.168.1.106);客户端:Server 2008 R2(IP:192.168.1.107)一、 创建用户itjong运…

hive udf 分组取top1_Hive中分组取前N个值的实现-row_number()

背景假设有一个学生各门课的成绩的表单,应用hive取出每科成绩前100名的学生成绩。这个就是典型在分组取Top N的需求。解决思路对于取出每科成绩前100名的学生成绩,针对学生成绩表,根据学科,成绩做orderby排序,然后对排序后的成绩&…

线性规划图解法求最优解_高中数学:简单的线性规划问题

1. 简单线性规划问题的有关概念先来看一道高考题:某公司招收男职员x名,女职员y名,x和y须满足约束条件,则的最大值是( )A. 80 B. 85 C. 90 D. 95(1)约束条件:变量x、y满足的一组条件,如上面高考题中的二元一…

在桌面关闭计算机关机不了怎么办,为什么我电脑按关机屏幕一直显示正在关机却一直关不了机怎么办...

“开始”-->“运行”-->键入“Regedit”-->“HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\control\Shutdown子项,在右边窗口中新建一个"字符串值",命名为"FastReboot",同时将"数值数据"设为0即可。如果还不行再…

go struct 静态函数_Go语言学习笔记(四)结构体struct 接口Interface 反射reflect...

加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959结构体structstruct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套;go中的struct类型理解为类,可以定义方法,和函数定义有些许区…

html彩色背景指令,HTML_第四章 颜色背景的CSS,本 章 C S S 的 主 - phpStudy...

第四章 颜色背景的CSS本 章 C S S 的 主 要 作 用在前面的章节介绍完了声明与应用的方法及 一些特性之後,从这章开始,便要正式进入CSS的…

arcgis xml 下载 切片_xml格式文件如何用arcgis进行编辑和更新

展开全部为了让你的解析器能够明白这些62616964757a686964616fe59b9ee7ad9431333335343339字符,你必须在XML文档中统一的字符编码标准。--------------------------------------------------------------------------------Windows 95/98 记事本Windows 95/98 记事本…

计算机c盘用户,windows 7 c盘的用户文件夹users如何转移

在这儿逛的朋友一看转移系统文件夹,肯定想到了Windows7优化大师或者魔方,通过他们可以轻松的转移“收藏夹”、“我的文档”等等系统文件夹。但是,如果要把 c:users 这个文件夹彻底转移怎么办呢?Windows7的用户文件夹默认所在位置是系统盘(通…

spark-sql建表语句限制_SparkSQL

SparkSQL介绍Hive是Shark的前身,Shark是SparkSQL的前身,SparkSQL产生的根本原因是其完全脱离了Hive的限制。SparkSQL支持查询原生的RDD。 RDD是Spark平台的核心概念,是Spark能够高效的处理大数据的各种场景的基础。能够在scala中写SQL语句。支持简单的SQ…

docker harbor 域名_docker registry harbor

部署 harbor安装方式: offline软件安装需求:docker 1.10.0 and docker-compose 1.6.0docker 我们选用官方的 repo , yum install docker-ce -ydocker-compose , yum install python-pip,pip install docker-compose下载 Harbor离线安装包: ht…

groupwise_GroupWise部分文档翻译

最近用到了GroupWise,BaiDu了一下,基本没有中文资料,所以只有看英文文档,顺便把看到的东西记录下来,以备以后使用.*****PostOffice的信息存储1.PostOffice数据库PostOffice数据库(wphost.db)包括了所有PostOffice管理的信息,包括PostOffice地址薄(Address Book)的Copy,在GW系统…

苏州大学计算机学院报录比,【图片】18年苏州大学计算机872考研经验分享【苏州大学研究生吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼二、面试苏大的面试环节个人感觉就很水了。面试一共300′,但是大多数人五分钟就完事了,所以不大会有什么差距,除非你很优秀或者是什么都答不上来。苏大的面试是分组的,具体分到什么组…

计算机大作业论文意义,大学的大作业是什么?

原标题:大学的大作业是什么?大学里面的大作业一般就是课程设计之类的,一些老师会让学生做些课外实践的作业,作为平时成绩的一部分大作业听起来很高大上,然而好多课程其实只是一篇论文。论文类的就是有点水的了。毕竟学…

arduino智能浇花系统_arduino+水泵+继电器+RFID

arduino继电器电机应用场合:加湿器、自动浇花、智能门锁、报警系统.......总之很多场合都适用。本章就介绍利用RFID卡输入,驱动水泵。/* * ---------------------------------------------------------------------------------------------------------…

改革以来计算机应用发展总结,计算机应用基础总结论文

高等教育教学改革不仅仅只是对知识的更新,对教学方法的改进,课程的考试模式改革也是非常重要的。下面是学习啦小编为大家整理的计算机应用基础总结论文,供大家参考。计算机应用基础总结论文范文一:计算机应用基础课程教学改革分析摘要:计算机…

7段均衡器最佳调节图_超高级的吉他均衡器 更细腻的控制 你值得拥有

BOSS DD-200吉他均衡器最近 BOSS推出了一款全新的吉他均衡效果器,为了追求更细腻的控制,这一次的更新,EQ200 可以说做出了不少的颠覆性改进。面板上很直观的看到,EQ的推子增加到了10段,外加一个总音量,对于…

金华职业技术学院计算机应用技术分数线,金华职业技术学院录取分数线2021是多少分(附历年录取分数线)...

金华职业技术学院录取分数线2020是多少分,各专业录取分数线是多少,是每个填报金华职业技术学院的考生最关注的问题,随着各省高考录取批次相继公布,考生也开始关心是否被录取,本站小编整理相关信息供参考,仅…

京瓷m5021cdn如何设置扫描_京瓷产品让您轻松应对潮湿天气

随着即将到来的四月,中国南方大部分地区也将伴随着雨季的到来。这也意味着很多复印件、打印机将会收到潮湿天气的影响,更容易出现卡纸、图像模糊等一系列问题。而京瓷公司最新推出的“黑金刚”系列增加了特有的感光鼓加热功能,有效减少机器受…

矩阵键盘简易计算机设计报告,矩阵键盘显设计报告..doc

摘要在日常生活中,我们经常要用到键盘来实现对电子装置的控制。小到手表手机,中到电视电脑,大到各种复杂仪器,都需要通过各种按键来实现各种操作。本次课程设计以按键控制显示为主题,以MSP430G2553单片机及其接口芯片为…