CSS学习之position属性

Position:

a.static默认值

b.relative相对定位

c.absolute绝对定位

d.fixed固定定位

“已经定位”:含义是position属性被设置为除static外的三种方式任意一种

“祖先元素”:当前DOM节点的上一个父节点

A.static:position

默认的属性值，也就是该盒子按照标准流(包括浮动方式)进行布局

B.relative:

相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它

relative定位原则：1.使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置

　　　　　　　　　2.使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响

C.absolute:

绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子存在一样。

absolute定位原则:1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素(或上级元素)”为基准进行偏移。如果没有已经定位的祖先元素(上级元　　　　　　　　　　素），那么会以浏览器窗口为基准进行定位

　　　　　　　　 2.绝对定位的框从标准流中脱离，这意味着它们对其后听兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样

D.fixed:

固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

转载于:https://www.cnblogs.com/Vitus_feng/archive/2010/07/31/1789669.html

CSS学习之position属性相关推荐

【CSS】【position】css中的position属性
css中的position属性用于设置元素位置的确定方式,它有以下几种取值: static:默认定位方式,子元素在父容器中挨个摆放 absolute:绝对定位,元素不占据父容器空间,相当于文档body ...
CSS中的Position属性
1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. r ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
在html中 position默认值,CSS 中的 position 属性
可能对CSS 稍微有点了解的人都知道position这个属性,妈蛋不就一个position么,有毛可说的.可别小看position,position属性有那几个值,这个可是facebook 面试的第一 ...
CSS学习之字体属性系列
目录 font-family font-size font-weight font-sytle font-variant font CSS3 字体 Web安全字体组合 font-family 1. f ...
CSS学习之display属性与浮动
1>display display属性主要是用来控制HTML元素的显示和隐藏与块级元素与行内元素的转换的. display的值,如下 --> block(块级元素 ) block元素 ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

CSS学习之position属性

CSS学习之position属性相关推荐

最新文章

热门文章