绝对定位:position:absolute

  绝对定位使元素的位置与文档流无关,因此不占据空间。

  绝对定位的元素的位置相对于最近的已定位祖先元素(absoulte、relative),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
  因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。   设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。   元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 相对定位:position:relative
  设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
  注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。 绝对定位:position:fixed
  元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身,不在是相对于最近的已定位祖先元素
另外z-index的使用 好像作用在定位上有效

css position 几种定位的更多相关文章

  1. CSS的4种定位方式比较

    CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...

  2. CSS的五种定位方式

    CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...

  3. css position 5种不同的值的用法

    position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky ...

  4. CSS的四种定位的参照物

    一.static定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. <!DOCTYPE html&g ...

  5. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  6. CSS的两种格式化上下文:BFC和IFC

    CSS的两种格式化上下文   文章包含很多个人理解,如果错误,欢迎指出~   在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  9. jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

随机推荐

  1. Unix进程和线程管理及其异同

    Unix进程和线程管理及其异同 一,进程 1,什么是进程 在最初的单处理器系统中,系统中的多道程序按照一定规则切换而实现多任务处理,后来发现多个程序并发导致系统资源被共享,为了描述和管理程序对共享资源 ...

  2. JSOI 2009 BZOJ 1444 有趣的游戏

    题面 题目描述 小阳阳发明了一个有趣的游戏:有n个玩家,每一个玩家均有一个长度为 l 的字母序列,任何两个玩家的字母序列不同.共有m种不同的字母,所有的字母序列都由这m种字母构成,为了方便,我们取大写 ...

  3. ubuntu 配置L2tp出现的问题解决

    运行环境:ubuntu 14.04 64位 配置推荐网址: https://linux.cn/article-3409-1.html 首先,官方教程是必须的: https://help.ubuntu. ...

  4. Linux学习之十八-sudo分权管理

    sudo分权管理 1.为什么需要sudo? 当我的主机是多人共管的环境时,如果大家都使用 su 来切换成为 root 的身份,那么就得每个人知道 root 的密码,这样密码太多人知道可能会流出去,很不 ...

  5. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  6. 2016.11.10 Could not get JDBC Connection; nested exception is java.sql.SQLException: No suitable driver

    运行项目rds_web时,出现错误提示:Could not get JDBC Connection; nested exception is java.sql.SQLException: No sui ...

  7. C#读取资源文件的两种方法及保存资源文件到本地

    方法1 GetManifestResourceStream   VB.NET中资源的名称为:项目默认命名空间.资源文件名 C#中则是:项目命名空间.资源文件所在文件夹名.资源文件名 例如:istr = ...

  8. React Native 三:样式

    一.声明和使用样式 1.React Native里面的样式和使用如以下所看到的.StyleSheet.create这个构造函数不是必须的. index.android.js文件 import Reac ...

  9. es6 - 导入导出

    今天用node纠结了半天,明明是正确的语法,一直报错,原来node和chrome并不支持es6语法.... 1. npm install package.json { "name" ...

  10. $ is not defined

    $ is not defined 引入Jquery的顺序不正确,要把它放在第一个引入