position属性的四种取值用法

众所周知，css中position有四种取值，分别是static、fixed、relative、absolute。我们今天就来详细的掰扯掰扯这四个值。

Position属性有以下四个取值：
1、static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。

2、relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。

3、absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。

4、relative：生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。
static
static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。
relative
定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
注：元素脱离正常的文本流意思是外观位置发生了改变，即是实际页面的可以看到的变化，文本流的位置依然存在指的是默认的位置（设置之前的位置）简单来说，就是人没了，魂还在~~~
absolute
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。

在这里要注意别跟Fixed值混淆，absolute并不是永远根据浏览器窗口进行定位的，这是Fixed的特性，absolute要更加复杂：
1、一般情况下以父级的左上角定位，在没有父级的时候，他是参照浏览器左上角（这与relative完全一致）；
如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。（这里是与relative的第二个不同点）；

2、如果父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）

3、如果父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）。
即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。（这里是与relative的第三个不同点）
fixed

其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。

position属性的四种取值用法相关推荐

mysqli操作数据库，连接和四种取值方法
<?php header("Content-Type:text/html;charset=utf-8");//使用mysqli对象操作数据库//方法一://$_mysqli ...
Java 中Map四种取值方式
map的主要作用是什么? 可以通过创建一个map的实现类来存放数据值和值的描述也可以通过描述去取得数据将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值.此接口取代 ...
Map的四种取值方式
```javapublic void testMap(){Map<String,String> map = new HashMap<>();map.put("1&qu ...
Position属性四个取值用法和区别
Position属性四个取值用法和区别在初学css的过程中常常会碰到设置定位的问题,大多数初学者都是大概明白,如果不好好弄清楚将会给以后的开发带来困难,经过本小菜对其他文章的浏览,自我总结如下: 目 ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
05.MyBtais两种取值符号以及输入参数和输出参数
输入参数:parameterType 两种取值符号的异同 1.类型为简单类型(8个基本类型+string) 不同点: a.#{任意值},${value} 其中的标识符只能是value b. #{}自动 ...
js之删除对象属性的三种方法判断对象中是否有某一属性的四种方法
js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法示例 1.基础版 var a = { id: 18, age: 20, name: "zhangsan" ...
【参数】REMOTE_LOGIN_PASSWORDFILE参数三种取值及其行为特性分析
在某些情况下可以使用REMOTE_LOGIN_PASSWORDFILE参数增强系统的安全性,所谓提高安全性就是禁止以SYSDBA或SYSOPER特权用户从客户端登陆到数据库系统中.这是一种牺牲管理便捷 ...
计算机曝光模式有哪些,摄影：单反相机中P、A、S、M四种曝光模式的用法详解 -电脑资料...
这篇教程是向脚本之家的朋友介绍单反相机中P.A.S.M四种曝光模式的用法,对于摄影爱好者非常值得学习,推荐到脚本之家,喜欢的朋友一起来看看吧很多朋友在初接触单反相机时对相机的P.A.S.M四种曝光模 ...

position属性的四种取值用法

position属性的四种取值用法相关推荐

最新文章

热门文章