position的五种方式

任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

大多数情况下，height和width 被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。

除了刚刚描述的情况（绝对定位元素填充可用空间）：

如果top和bottom都被指定（技术上，而不是auto），top 胜出。
如果指定了left 和right两侧，则在direction为ltr（英语，水平日语等）时left 赢，并且在direction为rtl时right赢（阿拉伯文，希伯来文等）。

static：

默认值
在文档流中
忽略 top, bottom, left, right 或者 z-index 声明

relative：

在文档流中
相对于其正常位置进行定位

absolute：

脱离文档流
相对于static定位以外的第一个父元素进行定位，若没找到这样的父元素，则相对与初始包含块（包含HTML元素的矩形）定位
相对于边框内部进行定位
绝对定位元素填充可用空间

fixed

脱离文档流
相对于浏览器窗口进行定位

sticky

实验性质的API，生产环境尽量别使用

position的五种方式相关推荐

详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
Android数据存储五种方式总结
1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用ContentProvider存储数据 5 网络存储数据下面详细讲解 ...
android mysql储存动态数据_Android数据存储五种方式总结
本文介绍Android平台进行数据存储的五大方式,分别如下: 下面详细讲解这五种方式的特点第一种: 使用SharedPreferences存储数据适用范围:保存少量的数据,且这些数据的格式非常简单 ...
元素垂直居中的五种方式
元素内容垂直居中本文介绍: 元素标签内的内容垂直居中有两种思路, 第一种思路是将元素内容利用行高或者内边距padding属性设置第二种思路是子盒子在父盒子中垂直居中,利用flex布局或者posit ...
java中读取properties文件内容五种方式
一.背景最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...
SSH深度历险（六）深入浅出----- Spring事务配置的五种方式
这对时间在学习SSH中Spring架构,Spring的事务配置做了具体总结.在此之间对Spring的事务配置仅仅是停留在听说的阶段,总结一下.总体把控.通过这次的学习发觉Spring的事务配置仅仅要把 ...
android ui 最新教程,Android更新UI的五种方式，androidui五种
Android更新UI的五种方式,androidui五种handler.post activity.runOnUiThread view.post handler+Thread AsyncTask 例 ...
CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网 ...
下列哪个不是目前python里的内置模块-python引入模块的五种方式与内置模块
模块导入的五种方式 1.import 模块名 2.from 模块名 import 方法名 3.from 模块名 import * 4.import 模块名 as 别名 5.from 模块名 impor ...
java clone方法_干货满满：Java中创建对象的五种方式详解
通常来说,对象具有状态和行为,变量用来表明对象的状态,方法表明对象所具有的行为. 作为Java开发者,我们通常都是使用依赖管理系统,比如Spring去创建Java对象,但使用管理系统创建对象并不是唯一 ...

position的五种方式

position的五种方式相关推荐

最新文章

热门文章