static(静态定位):即默认值,元素框正常生成的,top、right、bottom、left这些偏移属性不会影响静态定位的正常显示(属性不应用);

relative(相对定位):元素相对自身偏移某个位置,元素仍保持其未定位前的形状,它原本所占的空间仍保留,可通过z-index进行层次分级,子元素可相对该元素进行绝对定位;

absolute(绝对定位):元素框从文档流完全删除,相对于其最近的父级块元素(如果父级 position 为 static 时,absolute元素将以body坐标原点进行定位),元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框,可通过z-index进行层次分级;

fixed(固定定位):它所相对固定的对象是可视窗口,与其他无关,可通过z-index进行层次分级。

CSS定位有几种?分别描述其不同的更多相关文章

  1. CSS定位的三种机制:普通流、绝对定位和浮动

    1.普通流: position : static – 元素框正常生成.即上述不对元素进行任何样式设置的默认形态. position : relative (此时设置top, right, bottom ...

  2. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  3. CSS中的三种基本的定位机制

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  4. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  5. CSS中的三种基本的定位机制(普通流、定位、浮动)

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  6. css定位方式有哪几种?

    复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点.下面我们来看一下css的几种定位方式. float定位(即浮动定位): 这种定位方式很简单,只需规定一个浮动的方向 ...

  7. 练习题 --- 写出5种css定位语法

    写出至少5种css语法(每种语法不一样)

  8. css定位和浮动

    1.css中一切元素皆为框.div.p.h1等为块框:span.strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念).通过display可以改变框的类型,行内框通过 ...

  9. CSS定位(CSS定位概述、相对定位、绝对定位、浮动)

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

随机推荐

  1. Python08之分支和循环3(for、while循环)

    一.for语句: for 目标 in 表达式: 循环体 i = "湖人总冠军" for each in i: print(each) 湖 人 总 冠 军 for each in i ...

  2. python 之 subprocesss 模块、configparser 模块

    6.18 subprocesss 模块 常用dos命令: cd : changedirectory 切换目录 ​ tasklist:查看任务列表 ​ tasklist | findstr python ...

  3. Consul基本使用

    原文: Consul基本使用 date: 2019-05-13 17:01:37 前言 官网介绍Consul是一个分布式服务网格(Service Mesh)解决方案... 而我目前的理解是提供了分布式 ...

  4. 使用docker搭建reids主从,哨兵。

    Redis主从配置,如果没有真机就要用虚拟机,使用Docke for Windows host网络有问题. 准备: 1.安装虚拟机. 2.下载redis的安装文件:http://download.re ...

  5. Go 操作 Mysql(一)

    关于 Go 的标准库 database/sql 和 sqlx database/sql 是 Go 操作数据库的标准库之一,它提供了一系列接口方法,用于访问数据库(mysql,sqllite,oralc ...

  6. JS的DOM和BOM

    * JavaScript分三个部分: ECMAScript标准:JS的基本的语法 DOM:Document Object Model --->文档对象模型----操作页面的元素 BOM:Brow ...

  7. 1-JavaScript变量

    对于JS的变量这个环节,其实主要要了解一下JS数据类型的存储方法 JS有两种不同的数据类型:基本类型(原始类型),引用类型(对象类型). 1.栈 (stack) 和 堆 (heap) 栈 (stack ...

  8. What is Verbose Garbage Collection (verbosegc) and How do I Enable it on WebLogic

    问题描述: What is Verbose Garbage Collection (verbosegc) and How do I Enable it on WebLogic 问题分析: 通过添加gc ...

  9. iOS退出APP

    强制退出有四种: exit(); abort(); assert(); 主动制造一个崩溃: exit() 1.附加了关闭打开文件与返回状态码给执行环境,并调用你用atexit注册的返回函数: 2.警告 ...

  10. stm32 触摸屏 XPT2046

    引脚功能描述 控制字的控制位命令 控制字节各位描述 单端模式输入配置 差分模式输入配置 时序 前8个时钟用来通过DIN引脚输入控制字节,接着的12个时钟周期将完成真正的模数转换,剩下的3个多时钟周期将 ...