css四种定位及相关知识总结(附实例、图解）

四种定位之静态定位
四种定位之相对定位
四种定位之绝对定位
子绝父相原则
定位盒子居中
四种定位之固定定位
关于定位的层级关系（z-index）
两种设置元素显示跟隐藏的区别

定位 position

取值：

static：
对象遵循常规流。此时4个定位偏移属性不会被应用。

relative：
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute：
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

fixed：
与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

四种定位之静态定位

就是默认的定位规则

四种定位之相对定位

Position: relative;

偏移量： top left right bottom
成对出现，垂直方向跟水平方向各一个

  相对定位的特点：1，相对的是自身原来的位置的改变2，没有脱标，占标准流中原来的位置3，如果只设置定位方式，而没有设置偏移量元素的位置不变

四种定位之绝对定位

Position: absolute;

绝对定位的特点：
1，脱离标准流，不占标准流的位置
2，可以改变元素的显示方式
3，如果只设置定位方式，没有设置偏移量，元素的位置不会改变
4，如果有包含关系
子元素绝对定位，父辈元素时是静态定位，那么这个子元素参照浏览器做位置变化
但是如果这个父元素是非静态定位，那么这个子元素参照的是非静态定位的父辈位置来做位置改变
如果父辈元素中有多个非静态定位，那么这个子元素参照离他最近的父辈元素做位置变换

子绝父相原则

在有嵌套关系时，如果要改变子元素相对于父元素的位置，则在子元素样式加上绝对定位position：absolute；在父元素样式加上相对定位position：relative；因为如果都设置绝对定位，那么父元素就脱离了标准流，反而影响了整体布局。

定位盒子居中

要使子盒子在父盒子中无论页面比例如何进行居中

方法：设置50%的偏移量，然后让居中的盒子往相反的方向移动自身的一半

初始：子盒子在父盒子中默认位置

步骤一：

 .father{position: relative;}.son{position: absolute;top: 50%;left: 50%;
}

效果：

原因：没算上子盒子本身的宽高

步骤二：算上子盒子宽高的一半：

.son{margin-left: -50px;margin-top: -50px;}

效果：

四种定位之固定定位

Position：fixed；

固定定位的特点：认死理型
1.脱离标准流，不占原来位置
2.固定定位的元素不设置宽度，不会继承父类的宽度
3.如果这个元素做的固定定位，不管父辈元素是什么定位
这个固定定位的元素都是以浏览器作为参考标准来做位置改变的

常用语侧边栏

关于定位的层级关系（z-index）

语法：
z-index: auto | < integer >
默认值：auto
适用于：定位元素。即定义了position为非static的元素
取值：
auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
< integer >：用整数值来定义堆叠级别。可以为负值。

1，对于z-index只对非静态定位才起作用
2，对于非静态定位，后面的元素的层级高于前面的(解析从上到下)
3，定位的元素的z-index都默认是0

两种设置元素显示跟隐藏的区别

display: none;设置元素隐藏后，原来的位置也不再占用

visibility:hidden;隐藏元素以后依然占据原来的位置

css四种定位及相关知识总结(附实例、图解）相关推荐

css四种定位详细讲解
在前端开发中,最重要的莫过于盒子的使用,在盒子中最常用的就是使用定位进行对盒子的位置的调整,这里我简单的介绍下这四种定位方式: 1.static:静态定位也是默认的定位方式,该定位是不脱标的定位方式, ...
H5C3基础学习总结之CSS四种定位模式
定位组成定位 = 定位模式 + 边偏移定位模式适用于制定一个元素在文档中的定位方式.边偏移则决定了该元素的最终位置. 定位模式定位模式决定元素的定位方式,通过position属性来设置: 值语 ...
html四种选择器的特点,css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做为后 ...
CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
Mysql数据库（四）——mysql索引相关知识
Mysql数据库(四)--mysql索引相关知识一.索引的概念二.索引的优缺点 1.优点 2.缺点三.创建索引的原则四.索引的分类和创建方法 1.普通索引 ①.直接创建索引 ②.修改表方式创建 ...
光斑定位技术在空间激光通信中扮演着重要的角色。本文将详细介绍光斑定位的相关知识，并使用Matlab实现一些相关的算法。
光斑定位技术在空间激光通信中扮演着重要的角色.本文将详细介绍光斑定位的相关知识,并使用Matlab实现一些相关的算法. 一.光斑定位技术光斑定位技术是一种通过计算像素位置来确定目标物体位置的技术,广 ...
python实现单例模式的三种方式及相关知识解释
python实现单例模式的三种方式及相关知识解释模块模式装饰器模式父类重写new继承单例模式作为最常用的设计模式,在面试中很可能遇到要求手写.从最近的学习python的经验而言,singlet ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
定位的简介和四种定位
目录一.定位的简介二.四种定位 Ⅰ 相对定位 Ⅱ 绝对定位 Ⅲ 固定定位 Ⅳ 粘滞定位一.定位的简介定位(position) 定位时一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位 ...
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...

css四种定位及相关知识总结(附实例、图解）

css四种定位及相关知识总结(附实例、图解）相关推荐

最新文章

热门文章