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定位的小问题还有很多,相信今后的学习和工作中还会再遇到,所以还会再补充。
position定位的小问题的更多相关文章
-
浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
-
元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
-
(转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
-
CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
-
position定位
CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...
-
(转)Position定位:relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
-
盒子模型&;position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
-
CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
-
归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
随机推荐
-
spring-stutrs求解答
这里贴上applicationContext里的代码: <?xml version="1.0" encoding="UTF-8"?> <bea ...
-
JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
-
linxu scp命令
\ svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令+scp命令详解 名称:cp 使用权限: ...
-
C++安装失败解决办法
法一:删除注册表中的HKY_LOCAL_MACHINE\\SYSTEM|ControlSet001\\Services\\VSS,卸载重装.法二:点击 setup目录下的 wpie15.exe .. ...
-
Windows玩转Docker(一):安装
Docker官网地址: http://www.docker.com/ 本文参照site: https://docs.docker.com/windows/ Docker 项目的目标是实现轻量级的操作系 ...
-
命令行,备份、导入数据库Oracle
备份库:exp username/password@Database file="h:\datas.dmp" owner=username 导入语句 :imp username2/ ...
-
PHP从入门到精通(二)
PHP从入门到精通 之PHP中的函数 各位开发者朋友大家好,自上次更新PHP的相关知识,得到了大家的广泛支持.PHP的火爆程度不言而喻,函数作为PHP中极为重要的部分,应诸位的支持,博主继续跟进更新 ...
-
图片未完成加载显示loading
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
-
【C++】构造函数不能是虚函数
1 虚函数对应一个vtable,这大家都知道,可是这个vtable其实是存储在对象的内存空间的.问题出来了,如果构造函数是虚的,就需要通过 vtable来调用,可是对象还没有实例化,也就是内存空间还没 ...
-
《Java程序设计》第7周学习总结 20165218 2017-2018-1
20165218 2017-2018-1 <Java程序设计>第7周学习总结 教材学习内容总结 JDBC与MySQL数据库 数据库的功能:数据的存储.查询.修改.安全 MySQL:数据库: ...