position属性一共有4个值,分别是static、absolute、relative、fixed。

  static为默认值,指块保持在原本应该在的位置上,即该值没有任何移动的效果。

  absolute属性是参照浏览器的左上角,配合top、right、bottom、left进行定位,在没有设定top、right、bottom、left时,默认根据父级的坐标原点为原点。如果设定了top、right、bottom、left,并且父级没有设定position属性,那么当前的absolute则以浏览器的左上角为原点进行定位,位置将由这四个属性决定。

  relative属性与absolute属性完全不同,子块则相对于其父块中它本来应该在的位置进行定位,同样采用top、right、bottom、left这4个属性配合。

  fixed属性与绝对定位很类似,只不过固定定位时,元素会完全从文档流中去除,不会有相对于文档中任何部分的位置。

css 之 position定位的更多相关文章

  1. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  2. css元素position定位和z-index

    网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...

  3. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  4. CSS使用position定位后导致元素浮动

    1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...

  5. css中position 定位的兼容性,以及定位的使用及层级的应用

    一.首先我们来看看定位的兼容性,当然是在IE6.7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧: 1.在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解 ...

  6. CSS——对position定位和margin-top的理解

    一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...

  7. css的position定位终极总结

    relative相对定位是相对于自己的位置定位,absolute绝对定位是向上级一级一级搜索有position属性的div,如果没有找到就相对于body定位

  8. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  9. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

随机推荐

  1. thinkcmf5 学习笔记

    1.api里如何传递页码和每页记录数   data     :{category_id: '{$category.id}',page:++count+',10'}, page参数传递页码+数量,例如 ...

  2. iOS SDK中使用NSXMLParser解析XML(iphone网络篇三)

    iOS SDK的NSXMLParser解析XML文档是事件驱动模式的,即采用SAX方式来解析XML格式文档.NSXMLParser在处理XML文档的过程中当遇到一些要素(元素.属性.CDATA块.评论 ...

  3. oracle redo 重做日志文件

    以下易容翻译自oracle dba官方文档,不足之处还望指出. 管理重做日志文件 学习目标:1.解释重做日志文件的目的2.描述重做日志文件的结构3.学会控制日志切换与检查点4.多元化管理重做日志文件5 ...

  4. datagrid的修改和删除功能的实现

    1.修改 双击,进入一行的编辑状态的功能的实现 2.删除 3.扩展easyui的datagrid,添加动态增加或删除Editor的方法 (1)背景要求: 对于某一列,比如密码,动态增加时候,是可以编辑 ...

  5. cf965d Single-use Stones

    ref #include <iostream> #include <cstdio> using namespace std; int a[100005], n, l, ans= ...

  6. Ecplise实战常用操作快捷键(更新至2018年10月8日 13:46:40)

    ctrl+鼠标左键    进入/查看这个类或者方法, ctrl + t        快速类型层次结构(出现部分方法) ctrl + o                             快速大 ...

  7. Django框架学习-01Django介绍

    01-Django介绍 02-HTTP协议介绍 01-Django介绍 1.什么是Web框架? 随着Web最新发展趋势的不断升级,Web项目开发也越来越难,而且需要花费更多的开发时间.所以,Web程序 ...

  8. PAT——乙级1016

    乙级PAT的1016 乙级的题相对比较简单,我也是主要联系写代码的格式,而不是联系算法. 1016 部分A+B (15 point(s)) 正整数 A 的“D​A​​(为 1 位整数)部分”定义为由  ...

  9. ssh-add Could not open a connection to your authentication agent.

    ssh-add 报错Could not open a connection to your authentication agent. 需要执行以下代码 eval `ssh-agent -s` ssh ...

  10. [国家集训队][bzoj 2152] 聪聪可可 [点分治]

    题面: http://www.lydsy.com/JudgeOnline/problem.php?id=2152 思路: 题目要求统计书上路径信息,想到树上分治算法 实际上这是一道点分治裸题,我就不瞎 ...