css之position定位

waruqi 发布于2019-08-30 15:55 / 1596人阅读

摘要：一定位方式默认定位方式相对定位相对于该元素静态定位的元素定位即元素所在正常文档流的位置相对定位结果相对定位并没有脱离文档流只是相对于该元素以前所在的位置进行偏移绝对定位相对于除了定位以外的父元素进行定位如果父元素没有定位就根据即浏览器窗口进

一.定位方式

1.position:static;默认定位方式
2.position:relateve;相对定位,相对于该元素静态定位的元素定位(即元素所在正常文档流的位置)
eg:




  
    position相对定位
  
  

  
    
      1
      2
      3

结果:

相对定位并没有脱离文档流,只是相对于该元素以前所在的位置进行偏移

3.position:absolute(绝对定位),相对于除了static定位以外的父元素进行定位,如果父元素没有定位,就根据body(即浏览器窗口)进行定位,绝对定位的子元素是脱离文档流的,在原文档中不占有空间
eg:把上述例子第二个子div定位方式修改下,它的父级元素(class="container")没有定位,所以相对于body进行定位

.div2 {
    position: absolute;
    top: 40px;
    left: 40px;
  }

结果:

4.position:fixed(固定定位),相对于浏览器窗口进行定位,即body
5.position:inherit;继承父元素的定位方式

二.文档流

1.定义:文档流是在 HTML 中的位置顺序决定排布的过程
2.脱离文档流的三种方式:

positon:relative;
positon:fixed;
float浮动

3.以上脱离文档流会使当前元素形成一个BFC(块级格式化上下文),对于BFC的理解,请看我之前的总结https://segmentfault.com/a/11...

GPU云服务器云服务器 position定位 position，css position属性，css position()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117172.html

天坑，CSS之定位Position（六分之五）

摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。 Position定位个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。 position属性 position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。对应了四...

anRui 2019-08-02 10:56 评论0 收藏0
天坑，CSS之定位Position（六分之五）

摘要：下文称位置属性即为。注意，不会脱离文档流，具体见下面的图示。直译为修正，简单粗暴，直接相对浏览器窗口显示区域定位。 Position定位个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute，当年可是被虐的不轻。当然了，现在爱上了这个属性，谁用谁知道。 position属性 position是CSS的一个属性，地位较高，也是我们重点要说的一个属性。对应了四...

xuweijian 2019-08-30 15:54 评论0 收藏0
CSS基础知识之position

摘要：最近在慕课网学习了网页布局基础和固定层效果，都是由声音甜美的婧享人生老师所录制，视频详细讲解了中的用法，在此把学习笔记分享给大家。最近在慕课网学习了网页布局基础和固定层效果，都是由声音甜美的婧享人生老师所录制，视频详细讲解了CSS中position的用法，在此把学习笔记分享给大家。 CSS定位机制标准文档流（Normal flow）浮动定位（Floats）绝对定位...

xiaowugui666 2019-08-30 12:56 评论0 收藏0
CSS之position详解

摘要：元素的位置通过以及属性进行规定。生成相对定位的元素，相对于其正常位置进行定位。规定应该从父元素继承属性的值。表示相对原先位置右边进行偏移，表示相对原先位置下边进行偏移。当和同时存在，仅有效，当和同时存在仅有效。定义和用法 position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。...

PiscesYE 2019-08-29 13:11 评论0 收藏0