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. POJ3368题解

    题目大意:一个非降序序列,有若干查询,每次查询一个区间中重复次数最多的数字的个数. 思路:因为是非降序的,所以可以从头遍历把每个相同的数字划为一个块,用p[i]表示ai划分到了哪个块里面,同时还可以记 ...

  2. 哈工大 计算机网络 实验三 IPv4 分组收发实验&IPv4 分组转发实验

    计算机网络实验代码与文件可见github:计算机网络实验整理 实验名称 IPv4 分组收发实验&IPv4 分组转发实验 实验目的: (注:实验报告模板中的各项内容仅供参考,可依照实际实验情况进 ...

  3. 进程&线程（二）：Thread相关方法与属性

    学习自:python进程.线程.协程 - 张岩林 - 博客园 1.threading.Thread Thread方法 方法(使用方法为Thread.xxx) 说明 start() 激活线程 getNa ...

  4. （第二章第三部分）TensorFlow框架之读取二进制数据

    系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html (第二章第二部分)Tens ...

  5. JAVA——运算符

    目录 运算符 1.算术运算符 练习题: 2.关系运算符(比较运算符) 3.逻辑运算符 3.1&& 和 & 使用区别 3.2|| 和 | 使用区别 3.3 取反 基本规则 3.4 ...

  6. tep完整教程帮你突破pytest

    持续维护的教程 tep教程会随着版本更新或经验积累,持续维护在电子书中,最新的最全的内容请锁定这篇文章[最新]tep完整教程帮你突破pytest: https://dongfanger.gitee.i ...

  7. 巧用 CSS 构建渐变彩色二维码

    今日,群里有个很有意思的问题,问我如何实现一个彩色的,带渐变的二维码,像是这样: 很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维 ...

  8. JS-购物车

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. mysql sql_mode=only_full_group_by问题临时解决

    执行代码 set global sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZER ...

  10. Java IDE的历史变迁及idea的使用

    Java开发工具的历史变迁 JCreator Jcreator是荷兰的Xinox Software公司开发的一个用于Java程序设计的集成开发环境(IDE),该公司成立于2001年: 官方网站:htt ...