CSS的四种定位方式

1.静态定位：
设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

2.相对定位：
设置方式为position: relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，相对定位的盒子是相对自己在标准流中的位置进行偏移，但是盒子在页面中占据的位置是不会改变的。

两个相对定位的盒子，默认的情况下第二个盒子层级比第一个盒子层级高，即第二个盒子可以覆盖第一个盒子，如果想让第一个盒子覆盖第二个盒子，可以通过设置z-index属性实现。

第一个盒子设置z-index前：

第一个盒子设置z-index: 1;后：

3.绝对定位：
设置方式为position: absolute;绝对定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，绝对定位的盒子是相对设置了定位属性（静态定位不算）的最近的父级盒子的位置进行偏移，如果没有设置了定位的父级盒子，则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。

3.固定定位：
设置方式为position: fixed;固定定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动，固定定位的盒子永远显示在浏览器窗口，不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。

固定定位的盒子默认的宽高由其内容决定。

结果：

CSS的四种定位方式相关推荐

P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
CSS中的四种定位方式
在CSS中定位有以下4种: 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位 - static 静态定位是css中的默认定 ...
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
目录一.CSS定位布局 1.1.static静态定位 1.2.relative相对定位 1.3.fixed固定定位 1.4.absolute绝对定位 (1)默认绝对定位参考点 (2)设置绝对定位参考 ...
html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令
在终端输入命令: $ sass --watch scss:css --style expanded 即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expa ...
关于四种定位方式的介绍
定位,同浮动一样是前端开发人员进行css布局的另一神器.浮动布局比较灵活,但不容易控制,定位布局则相反,可以让用户精确地控制元素在页面中的位置"指哪打哪",但缺乏浮动布局的灵活性. ...
CSS的四种引入方式
1.使用link标签引入css文件: <head><link rel="stylesheet" type="text/css" href=&q ...
css的三种定位方式使用探讨
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位. 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例复制代码代码 ...
CSS的几种定位方式
CSS 为定位提供了一些属性,利用这些属性,可以建立列式布局. css定位的几种方式: 1.static(静态定位): 默认值.没有定位,当我们没有指定定位方式的时候,这时默认的定位方式就是stati ...
relative布局html,CSS的四种布局方式static/relative/fixed/absolute
static static布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响.布局元素的位置即其在标准文档流中的位置. relat ...

CSS的四种定位方式

CSS的四种定位方式

CSS的四种定位方式相关推荐

最新文章

热门文章