CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit
static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会无效,z-index也无效。(z-index C 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。所以z-index也需要在能够定位的position属性上才能生效)。
absolute 绝对定位:其位置是相对于最近的已定位的父元素,这就排除了设置为static的元素。定位之后,原来的元素空间被删除,重新生成块级框,相对于参照元素静止。设置尺寸要注意百分比是相对谁而言的--------最近定位的祖先元素。lrtb(left,right,bottom,top)如果设置为0,它将对齐到最近定位祖先元素的各边-----形成一个居中的效果。lrtb若设置为auto它将恢复到常规流中,如果没有最近定位祖先元素,那他的祖先元素就是body。z-index可以控制堆叠顺序
relative 相对定位:可以使用 top,right,bottom,left,z-index进行相对定位,相对于自己在常规流的位置。任何元素都可以设置为relative,其绝对定位的后代都可以相对于它进行绝对定位,可以使浮动元素发生偏移,并控制其堆叠顺序。
fixed 固定定位:跟absolute很类似,区别是相对于视口做绝对定位。固定定位的元素不会随着视口滚动而滚动,继承absolute特点。
CSS中的position属性笔记的更多相关文章
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
随机推荐
- # 初体验之腾讯位置服务彩云天气开发者api
初体验 最近接触到了boxjs,看到了里面一个比较有意思的彩云天气的脚本,由于自己本身就是彩云天气pro的用户,日常使用过程中感觉到彩云的降雨提醒还是挺方便的,于是就准备开始使用这个天气的脚本. 脚本 ...
- Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
- 头文件afx.h作用
转载:https://blog.csdn.net/OnceMonkeyG/article/details/95723290 一些定义与设置,为MFC提供最基本支持,将各种松散的东西组织起来,同时为MF ...
- Flutter 开发从 0 到 1(三)布局与 ListView
上周日出去玩了,因此没时间写文章.我司加班到 11 点,第二天可以晚上班一个小时,加班到 12 点,可以晚上班两个小时,以此类推,为什么说这个,对的,加班第二天我没有多睡觉,而是起来抓紧时间写文章,好 ...
- IOS使用UITextView进行富文本编辑|纯干货
看了好多blog介绍富文本编辑,有很多很好的开源项目,比如:YYText.FastTextView.ZSSRichTextEditor等等.本着学习的目的还是选择用UITextView来实现简单的富文 ...
- git add 添加错文件如何撤销
git add 添加 多余文件 这样的错误是由于, 有的时候 可能 git add . (空格+ 点) 表示当前目录所有文件,不小心就会提交其他文件 git add 如果添加了错误的文件的话 以下是撤 ...
- protoc-c 阅读笔记
以前和山哥做过类似的,最近想起来,抽空又看了下 protoc-c. 山哥做的报文流向: rpc -> lydtree -> motree -> struct 涉及的细节很多 1) l ...
- Java 合并Word文档
合并文档可以是将两个包含一定逻辑关系的文档合并成一个完整的文档,也可以是出于方便文档存储.管理的目的合并多个文档为一个文档.下面,就将以上文档操作需求,通过Java程序来实现Word文档合并.合并文档 ...
- Redis GEO 功能使用场景
本文来源:https://www.dazhuanlan.com/2020/02/05/5e3a0a3110649/ 背景 前段时间自己在做附近直播相关业务,其中有一个核心的点就是检索用户附近的主播,也 ...
- Windows下CertUtil校验和编码文件
目录 前言 CertUtil计算文件hash 计算MD2 计算MD4 计算MD5 计算SHA1 计算SHA256 计算SHA384 计算SHA512 文件base64编码 文件base64解码 文件h ...