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. art-template 弹出上传多图

    主内容 <script id="img-show-tpl" type="text/html"> <div> <div class= ...

  2. LeetCode 198. 打家劫舍(House Robber) 5

    198. 打家劫舍 198. House Robber 题目描述 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两 ...

  3. [C#] - 从 HTML 代码中 转换 / 提取 可读文字(PlainText)的方法

    背景 在做网页数据分析的时候,我们关注的部分是内容,可以过滤掉HTML标签.Javascript.CSS等代码. 目标输入 <b>Hello World.</b><br/ ...

  4. Python中遍历整个列表及注意点(参考书籍Python编程从入门到实践)

    1. 利用for循环遍历整个列表 magicians = ['alice', 'dsvid', 'carolina'] # 遍历整个列表 for magician in magicians: prin ...

  5. 09 单例设计模式、__new__函数

    设计模式 设计模式是前任工作的总结和提炼,通常,被人们广泛流传的设计模式都是针对某一特定问题的成熟的解决方案. 使用设计模式是为了可重用代码.让代码更容易的被他人理解.保证代码的可靠性. 单例设计模式 ...

  6. Fiddler讲解2

    想要 浏览更多Fiddler内容:请点击进入Fiddler官方文档 阅读目录: 一.查看网络流量: 二.检查网络流量: 三.查看Web会话摘要: 四.查看Web会话统计信息: 五.查看Web会话内容: ...

  7. netty--buffer分配策略

    AdaptiveRecvByteBufAllocator 动态分配buffer大小的类. 如果前一次读取完全填满了分配的缓冲区,它将逐渐增加预期的可读字节数.(增加的方式:初始化类的时候,会预先设置好 ...

  8. docker 启动 容器----bootstrap checks failed

    错误信息: bootstrap checks failed 解决方法: 1.修改elasticsearch.yml配置文件,允许外网访问. vim config/elasticsearch.yml,增 ...

  9. 在Windows上安装Redis

    微软官网源码 https://github.com/MicrosoftArchive/redis 这里介绍安装Signed binaries版本 使用Chocolatey(Windows包管理工具)安 ...

  10. 二、openfeign生成并调用客户端动态代理对象

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 上一篇文章中,我们了解到了@FeignClient注解的接口被扫描到以后,会生成一个Fe ...