position 属性指定了html元素的定位类型。

position 属性有 4 种值：
1. static（default）
表示没有定位，元素出现在正常的文档流中。
为静态定位的元素设置 top|bottom|left|right 不起作用。

2. fixed
元素的位置相对于浏览器窗口是固定位置。
即使浏览器的窗口是滚动的它也不会移动。
fixed定位使得元素脱离了文档流，因而不占据空间。
设置了固定定位的元素宽高由其内部元素撑起。

3. relative
相对定位的元素是相对其正常位置。

由截图可以看出来，元素相对其正常位置向下向右移动了100px，但是它原本所占的空间并不会改变。

并且其后的同一个父容器里的元素会一起相对向下向右移动100px，与其父容器平级容器里的元素不受影响。
相对定位元素经常被作为绝对定位元素的容器块。

4. absolute
绝对定位的元素的位置是相对其最近的已定位父元素（也就是除static之外），如果找不到已定位的父元素，那么就相对于<html>元素。

absolute定位使得元素脱离了文档流，因而不占据空间。
设置了绝对定位的元素宽高由其内部元素撑起。

ps: 5. sticky 粘性定位 ？？？

浅析CSS定位的更多相关文章

  1. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  2. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

  3. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  4. 常用的CSS定位，XPath定位和JPath定位

    CSS定位 举例 描述 div#menu id为menu的div元素 div.action-btn.ok-btn class为action-btn和ok-btn的div元素 table#emailLi ...

  5. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  6. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  7. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  8. CSS定位小技巧

    CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...

  9. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

随机推荐

  1. 列表视图ListView

    依然是一个listView的Java文件 1 public class ListViewActivity extends Activity { 2 private ListView lv1; 3 @O ...

  2. DateTime TryParse方法，介绍

    1.与Date.Parse()方法的区别:Date.Parse(object o)方法接受一个object类型的参数,当参数为空或转换失败时会抛出异常DateTime.TryParse方法不会抛出异常 ...

  3. CentOS8安装Geant4笔记（一）：Geant4介绍、编译和安装

    前言   在服务器CentOS8.2上安装geant4软件.   GEANT4 介绍   Geant4 是一个用于模拟粒子穿过物质的工具包.其应用领域包括高能.核物理和加速器物理,以及医学和空间科学研 ...

  4. LeetCode-074-搜索二维矩阵

    搜索二维矩阵 题目描述:编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例说明请 ...

  5. Mattermost Server安装及配置AD/LADP

    一.安装Mattermost Server Mattermost is an open source, self-hosted Slack-alternative. 1.下载mattermost  s ...

  6. 使用 Xshell 连接矩池云 GPU服务器

    下单租用 租用成功 打开软件 完成 错误用法不能这样使用

  7. VIM中简化删除，光标移动和查找操作

    # 一.命令行模式下简化删除 1. 向后删除单个字符:[x] 2. 向前删除单个字符:[X] 3. 删除从光标开始到单词结尾:[dw] 删除从光标后的2个单词:[d2w] 4. 删除整个单词:[daw ...

  8. 使用Xtrabackup 备份mysql数据库

    ##创建逻辑卷 [root@node1 ~]# pvcreate /dev/sdb1 Physical volume "/dev/sdb1" successfully create ...

  9. STL基本用法的一些记录

    迭代器 (set类型)::iterator 就是迭代器 迭代器可以看成stl容器内元素的指针 set 默认从小到大排序 begin() set中最小的元素的迭代器 end() set中最大的元素的迭代 ...

  10. Prim算法求最小生成树

    首先在介绍这个算法之前我们要之明确一下什么是最小生成树的概念: 由 V 中的全部 n 个顶点和 E 中 n−1 条边构成的无向连通子图被称为 G 的一棵生成树,其中边的权值之和最小的生成树被称为无向图 ...