Css五种定位之间的区别
##CSS 定位机制##
CSS 有三种基本的定位机制:普通流、浮动流和定位流。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
##什么是CSS 定位 (Position) ?##
属性允许你检索和设置对象的定位方式
CSS 为定位提供了一些属性值,可以将布局的一部分与另一部分重叠。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
##CSS 定位都有哪几种以及之间的区别 ?##
1、static 默认值
相当于普通流;没有定位;
作用:可以用于取消元素之前的定位设置
2、relative 相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
参照物:自己所在的位置
特点:
a:如果没有定位偏移量,对于元素本身没有任何影响
b:不使元素脱离文档流,空间是会被保留的
c:不影响其他元素布局
d:left,top,right,bottom是相对于当前自身进行便宜的,不能独立存在,必须配合定位使用
3、absolute 绝对定位
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
参照物:
a:可视窗口:浏览器第一屏(默认情况下)
b:有设置定位的最近父元素
特点:
a:使元素完全脱离文档流
b:使内联元素支持宽高(让内联元素具备块特性)
c:使块元素默认宽根据内容决定(让块具备内联的特性)
d:如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
注:如果祖先元素中有多个元素具备定位模式,那么是已离自己最近的祖先元素进行偏移。
案例:图片上叠加说明文字
<div class="father">
<img src="pic.jpg" />
<div class="son">图片上的文字说明</div>
</div>
.father{
positon: relative;
}
.son {
position: absolute;
bottom:0px;
left:0px;
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
}
案例效果:
4、fixed 固定定位
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
参照物:
a:始终都是相对于整个浏览器窗口进行固定定位
特点:
a:使文档完全脱离文档流
b:使内联元素支持宽高(让内联具备内联块的特性)
c:使块元素默认宽根据内二公决定(让块具备内联块的特性)
d:相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响,不会受到祖先元素的影响。
案例:点击出现弹,位置水平垂直居中且固定不动
<div class="popup">
<div class="pop_body">...</div>
</div>
.popup{
width:300px;
height:400px
position: fixed;
left:50%;
top:50%
margin-left:-150px;
margin-top:-200px;
}
案例效果:
5、粘性定位 position:sticky;(css3新增属性,兼容性比较差)
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。
参照物:
a:在固定的时候:参照物是相对于整个浏览器窗口
特点:
a:相对定位和固定定位的结合体;
b:在没有到达指定位置的时候,是没有定位效果的(相当于相对定位);在到达设定的位置的时候 是固定定位;
c:在固定的时候:参照物是相对于整个浏览器窗口
生效规则:
position:sticky 的生效是有一定的限制的,总结如下:
a、须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
b、设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:
· 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
· 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。
c、达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。
案例:实现导航的吸顶效果(头部导航条固定)
#toolbar {
position: -webkit-sticky; /* safari 浏览器 */
position: sticky; /* 其他浏览器 */
top: 100px;
}
案例效果:(初始效果)
案例效果:(滑动之后效果)
##定位的作用##
a、在正常情况下,可以让一个元素覆盖在另外一个元素上面
b、可以移动一个元素的位置
c、可以固定某个容器在浏览器窗口的某个位置不动。
d、可以做吸顶效果,比如百度新闻的导航
##相对定位和绝对定位的区别##
a、 相对定位的参照物是自己本身所在的位置,
绝对定位的参照物是包含块
b、 相对定位是不会脱离文档流的,而且不对页面布局产生影响;
绝对定位是会脱离文档流的,原来的位置不在占有,后面的内容会把位置补上去
##绝对定位和固定定位之间的相同点和不同点##
相同点:
都会脱离文档流,并且都定位之后,结构在后面的元素会覆盖在最上面,都可以通过z-index来改变层叠顺序,也可以都用left top right bottom移动位置
不同点:
a、参照物不同
绝对定位的参照物有2个,A是浏览器的第一屏 B就是有定位的父元素
固定定位的参照物只有1个,是浏览器的当前窗口。
b、固定定位之后该元素就固定在某个位置了,拖动窗口的时候,不再改变
##层叠顺序z-index##
检索或设置对象的层叠顺序
注:他只针对于定位属性的元素起作用
a:auto 自动,默认的
b:number 数值越大,层越上
没有设置z-index时,最后写的对象优先级先显示在上层,设置之后,数值越大,层越上
##包含块的概念##
a、包含块是绝对定位的基础,包含块就是为定位元素提供坐标,偏移和显示范围的参照 物,即确定绝对定位的偏移起点和百分比 长度的参考;
b、绝对定位元素会根据包含块进行绝对定位,
默认情况下 ,浏览器的可视窗口是一个大的包含块,
默认情况下,绝对定位元素会相对浏览器的可视窗口进行定位;
如果他的祖先级元素定义了包含块,那他就最近的祖先级元素进行绝对定位。
c、怎么给他的祖先级元素定义成包含块: 给祖先级元素添加position:relative/absolute/fixed。
Css五种定位之间的区别的更多相关文章
- css五种定位方式介绍
1.static定位(普通流定位) -------------- 默认定位 2.float定位(浮动定位) 例:float:left; 有两个取值:left(左浮动)和right(右浮动).浮动元素会 ...
- CSS的五种定位方式
CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...
- CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底 页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- Python 中格式化字符串 % 和 format 两种方法之间的区别
Python2.6引入了 format 格式化字符串的方法,现在格式化字符串有两种方法,就是 % 和 format ,具体这两种方法有什么区别呢?请看以下解析. # 定义一个坐标值 c = (250, ...
- CSS——4种定位
若是没有指定定位方式,默认为静态定位. 1.静态定位(static) 静态定位会将所有元素正常流入页面. 2.绝对定位(absolute) 绝对定位将元素完全从页面流中取出,允许你为他制定一个绝对的位 ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- CSS三种定位机制
标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...
- LBS 与 GPS 定位之间的区别
什么是LBS定位? LBS英文全称为Location Based Services, 它包括两层含义:首先是确定移动设备或用户所在的地理位置:其次是提供与位置相关的各类信息服务.意指与定位相关的各 ...
随机推荐
- js Array 中的 map, filter 和 reduce
原文中部分源码来源于:JS Array.reduce 实现 Array.map 和 Array.filter Array 中的高阶函数 ---- map, filter, reduce map() - ...
- web压测工具http_load
1.什么是http_loadhttp_load是一款基于Linux平台的web服务器性能测试工具,用于测试web服务器的吞吐量与负载,web页面的性能. 2.http_load的安装1)下载地址:ht ...
- Python 学习之Anaconda 设置默认打开chrome 浏览器
笔者遇到的问题如何设置jupyter notebook 打开chrome 浏览器 1.打开anaconda prompt 2.输入jupyter notebook --generate-config ...
- rpm报错warning: /var/tmp/rpm-tmp.1OZa8q: Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY的解决
参考链接:http://blog.51cto.com/zymin0823/1546537 报错: 解决:使用如下两个选项
- curator配置及使用
1.action.yml --- actions: 1: action: index_settings options: index_settings: index: routing.allocati ...
- Github 绑定域名添加https的方法 2019年9月更新
官方教程 https://help.github.com/en/articles/using-a-custom-domain-with-github-pages 打开 https://github.c ...
- resourcequota分析(一)-evaluator-v1.5.2
什么是evaluator 大家都知道,Kubernetes中使用resourcequota对配额进行管理.配额的管理涉及两个步骤:1.计算请求所需要的资源:2.比较并更新配额.所以解读resource ...
- iptables学习02-nat表应用
nat表应用实验 第一步 准备工作 A机器两块网卡ens33(192.168.2.106).再添加一块自定义网卡ens37(192.168.100.1),添加到LAN内网区段(自定义名字,写什么无所谓 ...
- Codeforces Round #612 (Div. 2)C. Garland
第四次写题解,请多指教! http://codeforces.com/contest/1287/problem/C题目链接 题目大意是有一个数字串挂有1-n n个数字,现在上面缺失了一些数字,让你找出 ...
- C++走向远洋——31(六周,项目一,1.1)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...