绝对定位: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. API网关服务Zuul-Spring Cloud学习第五天(非原创)

    文章大纲 一.Zuul是什么二.Zuul的基本实现三.路由配置细节四.异常处理细节五.项目源码与参考资料下载六.参考文章   一.Zuul是什么   到目前为止,我们Spring Cloud中的内容已 ...

  2. Ubuntu 16.04下使用Wine安装Notepad++

    说明: 1.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 2.关于没有.wine文件夹的解决方法:在命令行上运行winecfg: 下载: (链接 ...

  3. [转]使用Wireshark来检测一次HTTP连接过程

    Wireshark是一个类似tcpdump的嗅探软件,界面更人性化一些,今天我用它来检测一次HTTP连接过程. 安装好之后,先配置一下,选择Capture->Options,先设定你要嗅探的网络 ...

  4. Auto-Test 要点纪录(一)

    1,select下拉框类型 使用工具可以看到html对应标签为<select>这类标签才是真正的下拉框类型就需要对应的方法,不能但看页面上的效果,有的做成了效果但其实不是select类型即 ...

  5. ORACLE中SID和SERVICE_NAME的区别

      先来讲一个小故事,2015年6月份,有个客户迁移了数据库,由单实例数据库变成了RAC.JAVA应用程序出现了无法连接数据库的情况,但是PL/SQL能连接上数据库.由于项目比较庞大,虽然在半夜切换的 ...

  6. docker selinux-enabled作用

    一.现象 在docker中有一个运行选项是selinux-enabled.这个选项的作用是啥? 简而言之,它提供了对docker容器中进程的selinux的控制支持.下面举例说明. 首先按照官方文档的 ...

  7. AutoCAD如何又快又好标注直径

    如下图所示,想要标注一条直径.先选择快速标注   鼠标单击左右两侧线条(变成虚线),然后按回车,就可以往下拖了.拖完了就是一条直径的标注.   如果想要修改为自己的尺寸,则在文字替换中加上前缀%%c即 ...

  8. jmeter 压测工具

    Apache jmeter 压力测试 java 环境安装 https://www.cnblogs.com/smyhvae/p/3788534.html 下载地址和文档 http://itopic.or ...

  9. Android Design Support Library(2)- TextInputLayout的使用

    原创文章,转载请注明 http://blog.csdn.net/leejizhou/article/details/50494634 这篇文章介绍下Android Design Support Lib ...

  10. DNA分子结构3D模型

    生物信息资源更新越来越快,使用可视化的方法来分析DNA序列已成为生物信息学的一个研究热点,用图形表示DNA序列的方法也越来越成熟.2011年,著名杂志<Science>发表一篇引起轰动的文 ...