css元素定位

css元素定位

默认情况下的元素定位：一个标签（元素，盒子）在没有特定定位设定（甚至也没有浮动）的时候，这种情况下的盒子的“排布（放置）”方式可以成为标准流，其位置有其规律：

１，块盒子总是自占一行

２，行内盒子会在一行中连续显示，到了行尾自动换行。

如果一个盒子具有浮动：则其位置会按照设定得浮动放心“自然流出”

 

除了以上两种情况，还有一种情况是：

ｐｏｓｉｔｉｏｎ属性对元素进行特别位置规定：定位设定。

 

１，position: static:静态定位——其实是所有元素的默认值（没有设定那就是这个值）

２，position: relative；相对定位 w3c中的定义：生成相对定位的元素，相对于其正常位置进行定位。

a)        相对定位是指一个元素相对于其所在的父盒子“本来的位置”的相对便宜量，可以设定偏移的方向有4个：left, right,  top,  bottom

b)        即：positon和left//right//top//bottom通常是必须同时对一个标签使用

第一 相对定位 参考位置 以标签的原位置

第二 仍然占有原位置的空间

结合案例理解:w3c案例

３，position: absolute:绝对定位：w3c的定义：生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位。

设定一个盒子的直接的“坐标值”：是相对于其“上级具有非静态定位盒子”的位置的绝对值（离left//right//top//bottom的数据）

a)        上级具有非静态定位盒子可能是两种情况：

i.              其上级具有relative, absolute,  fixed的元素，则就相对该元素

ii.              其上级中均没有该3者设定，则相对的是整个网页元素（即body）

第一 脱离的文档

第二 参考物:父辈元素位置 

第三 父辈元素 ： 上级是非静态定位

结合案例理解:w3c案例

在开发中绝对定位是很重要的 例如下拉菜单应用

４，position: fixed:固定定位：w3c案例

w3c的定义:生成绝对定位的元素，相对于浏览器窗口进行定位 

设定一个盒子相对于屏幕（窗口）的一个绝对位置。

参考物:浏览器窗口 

开发应用是 做广告 

注意：绝对定位和固定定位的盒子，通常已经不再认为是“隶属于”其父级盒子了，即所谓“脱离的文档