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. Qt：QListWidget

    0.说明 QListWidget指明一个基于Item的List Widget. 构造 QListWidget与QListView类似,都可以显示一列Item,区别在于前者可以往其中增删Item. QL ...

  2. Leaflet：Map类属性及方法

    1.初始化 L.map(<String> id , options ?) //用地图div的id创建 L.map(<HTMLElement>el , options?) //用 ...

  3. MySQL：Win10系统中设置默认编码为UTF-8

    Win10 系统下 Mysql 字符集(utf8)的设置 补充: 在[mysqld]下添加语句:init_connect='SET collation_connection = utf8_unicod ...

  4. 五、Java控制流程

    Java流程控制* 用户交互Scanner.Scanner进阶使用 用户交互Scanner ​ 之前我们学习的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获 ...

  5. JSON.parse()和JSON.stringfy()区别

    JSON.parse() 用于从一个json格式字符串解析出json类型的数据,如: 注意事项:json格式字符串必须是写在一排的,且括号外面用单引号,里面的每一个字符串用双引号 JSON.strin ...

  6. 使用pyautogui自动在某网站投票的脚本

    网页自动投票: # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan import re import pypercli ...

  7. 阿里一面，说说你了解zookeeper的应用场景有哪些？

    1.前言 又到了金三银四的时候,大家都按耐不住内心的躁动,我在这里给大家分享下之前面试中遇到的一个知识点(zookeeper应用场景),希望对大家有些帮助.如有不足,欢迎大佬们指点指点. 2.zook ...

  8. 内网渗透----使用mimikatz获取windows登陆口令

    使用mimikatz提取windows密码 以管理员运行后,可以随机打一些字符,进入如下界面 输入aaa::aaa,可展示所有模块: 可采用log命令,保存日志 获取hash与明文用户口令 privi ...

  9. Java设计模式之单例模式理解

    前言 本片博客主要记录Java23种设计模式中的创建型模式中的单例模式.单例模式可分为两类,一种是饿汉式,一种是懒汉式.饿汉式的三种设计方式(静态变量方式.静态代码块方式.枚举方式),懒汉式(单锁检查 ...

  10. 选择Key-Value Store

    [IT168 专稿]在之前的文章中,给大家介绍了<Redis快速入门:Key-Value存储系统简介>,今天进一步给大家介绍为什么选择Key-Value Store.Key-Value S ...