position定位说明

简介:
(1)定位类别:
static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative(相对定位)  对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed(固定定位)  这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
(2)相对定位

当Position属性值为Relative时 
对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置 
Top的值表示对象相对原位置向下偏移的距离 
bottom的值表示对象相对原位置向上偏移的距离 
两者同时存在时,只有Top起作用。 
left的值表示对象相对原位置向右偏移的距离 
right的值表示对象相对原位置向左偏移的距离 
两者同时存在时,只有left起作用。

如果相对定位的对象有padding 和border 和 margin时,定位的起点不受影响。还是原来物体的位置。

(3)绝对定位

当Position属性值为absolute时 
对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来 
Top的值表示对象上边框与浏览器窗口顶部的距离 
bottom的值表示对象下边框与浏览器窗口底部的距离 
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。 
left的值表示对象左边框与浏览器窗口左边的距离 
right的值表示对象右边框与浏览器窗口右边的距离 
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。 
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。注:绝对定位与文档流无关

(4)被关联的定位

 

<div ——————————— position:relative;最近的祖先定位元素,参照物
   <div—————————-没有设置为定位元素,不是参照物
     <div———————-没有设置为定位元素,不是参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3
 
Box2设置成绝对定位元素,脱离了文档流,文档流由box1-box2-box3变为box1-box3,box2以最近的定位祖先(蓝色框)为参照物。
层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
   <div—————————-没有设置为定位元素,不是参照物
     <div———————- position:relative 参照物
       <div box1
       <div box2 ——–position:absolute; top:50px; left:120px;
       <div box3

 

 


本文转自 韬光星夜 51CTO博客,原文链接:http://blog.51cto.com/xfqxj/477070,如需转载请自行联系原作者

相关文章
|
7月前
|
容器
追悼日网站自动变为黑白(解决filter导致的absolute和fixed定位问题)
这篇文章介绍了如何解决在网站页面上使用`filter: grayscale(100%)`导致布局问题的方法,建议将`filter`属性应用在`html`根元素上,以避免影响`absolute`和`fixed`定位的元素。
追悼日网站自动变为黑白(解决filter导致的absolute和fixed定位问题)
|
6月前
|
前端开发
前端基础(十三)_定位position、定位层级z-index
本文讲解了CSS中的定位机制,包括静态定位、相对定位、绝对定位和固定定位,并通过实例展示了如何使用这些定位方法调整元素位置。同时,还介绍了z-index属性的使用,解释了如何通过调整z-index值来改变定位元素的层叠顺序。
85 6
前端基础(十三)_定位position、定位层级z-index
|
8月前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
351 0
浅说position定位及z-index使用
浅说position定位及z-index使用
102 0
|
10月前
|
容器
position定位总结
position定位总结
|
前端开发
CSS Position(定位)
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。 也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。
191 0
CSS Position(定位)
|
编解码 前端开发 JavaScript
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位
html+css实战148-定位-相对relative
html+css实战148-定位-相对relative
136 0
html+css实战148-定位-相对relative
|
前端开发
前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative、absolute、fixed)的分析
231 0
|
Web App开发 前端开发 Android开发