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. 2020.9.28 多进程multiprocess 进程池pool 子进程subprocess 进程间通信

    1.multiprocessing模块--跨平台版本的多进程模块 multiprocessing模块提供了一个Process类来代表一个进程对象,下面的例子演示了启动一个子进程并等待其结束: from ...

  2. zookeeper的JAVA API使用

    1.创建连接 2.创建节点 3.监听信息 Watcher.class 4.获取节点 Stat stat = new Stat(); zk.getData(Path,true,stat); 5.修改节点 ...

  3. postman-接口测试常用test模块

    一.配置环境变量区分不同运行环境(开发.测试.生产等). 对接口进行测试时,不同环境往往对应不同的域名或IP,在Postman里一个接口域名相同但因为地址不同重复写多次很明显是愚蠢的做法,下面我们可以 ...

  4. mybatis介绍--基于个人学习JavaWeb的使用

    mybatis介绍 该博文放在javaWeb系列下,目的是记录我们javaWeb阶段所学的知识 @time=2022/3/11/11:52(最近休息玩了两天,今天重新启动生活) 一.mybatis发展 ...

  5. 译<容器网络中OVS-DPDK的性能>

    译<容器网络中OVS-DPDK的性能> 本文来自对Performance of OVS-DPDK in Container Networks的翻译. 概要--网络功能虚拟化(Network ...

  6. laravel 解决跨域问题并封装到中间件

    larav 官方手册有详细的步骤 https://learnku.com/articles/6504/laravel-cross-domain-solution 我们在用 laravel 进行开发的时 ...

  7. 【自动化基础】allure描述用例详细讲解及实战

    前言 allure可以输出非常精美的测试报告,也可以和pytest进行完美结合,不仅可以渲染页面,还可以控制用例的执行.下面就对allure的使用进行一个详细的介绍和总结. 需要准备的环境: pyth ...

  8. 使用SymPy

    最近工作的原因,需要进行一些积分运算,通过一些搜索得知了SymPy,记录一下使用历程. 1. SymPy介绍 SymPy是关于Symbolic Mathematics的Python库,它旨在成为一个功 ...

  9. Linux系统常用指令

    建立一个文件或文件夹的软链接: ln -s 原名 软链接名 软链接就类似Windows下的"快捷方式",访问它其实访问的是它指向的内容. git仓库操作 1.通常远程操作的第一步, ...

  10. RabbitMQ Go客户端教程3——发布/订阅

    本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,教程共分为六篇,本文是第三篇--发布/订阅. 这些教程涵盖了使用RabbitMQ创建消息传递 ...