css 相对位置-CSS布局的定位

1、定位的作用

在标准文档流中，块元素垂直排列css 相对位置，行内元素水平排列。 浮动允许多个块级包无缝地连续显示。 定位允许我们将元素从正常布局流中应有的位置移动到另一个位置（在包中自由通信或固定在屏幕上的某个位置）。

二、定位的实现

要使用定位，需要指定元素在文档中的定位模式，并设置【边缘偏移】来确定元素最终的显示和位置。

定位模式通过position属性设置。 常用的定位方式有静态定位、相对定位、绝对定位、固定定位四种。

边缘倾斜对元素进行定位css 相对位置，用上、右、下、左来描述。

通常水平位置由左或右控制，垂直位置由上或下控制。

价值

三、定位方式解读

3.1 相对定位

语法

div{
    postion:relative;
}

相对于正常文档流中的初始位置移动元素，相对于正常布局流中元素的默认位置的坐标。 原来占据的空间不会改变。

3.1.1 基本特征

3.1.2 应用场景

通常用作具有绝对定位的定位父级

3.2 绝对定位

语法

postion:absolute;

当没有定位父级时，它相对于body定位，当有定位父级时，它相对于最近的定位父级定位。

3.2.1 基本特征

3.2.2 应用场景

通常与相对定位（父相对于子绝对）结合实际案例使用，例如焦点图中的分页、翻页、视频网站中的vip标签等。

3.3 固定定位

语法

postion:fixed;

该元素相对于浏览器窗口定位，即使页面滚动也不会连接。

3.3.1 基本特性总结

3.3.2 应用场景

相对于窗口定位的元素，例如弹出窗口、滚动后的导航、侧边栏。

3.4 静态定位

语法

postion: static;

意思是“将元素放置在文档布局流的默认位置。HTML 元素的默认值是无定位的，遵循正常的文档流对象。

3.4.1 基本特性总结

3.4.2 应用场景

四、定位元素的层次顺序

定位元素的层次顺序独立于文档流，因此它们会覆盖页面上的其他元素。 标准文档流没有层次顺序。 z-index 属性指定定位元素的堆叠顺序（哪个元素应放置在前面或下面）。

语法

z-index:10;

总结

5、袋子居中的实现方式

方法一：

.box1{
            width: 200px;
            height: 200px;
            background: #f67000;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

方法二：

.box1{		
			position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

实现思路：left、right、top、bottom一起使用，margin: auto。

如果使用“上”、“右”、“下”和“左”来描述元素的四个边的位置，则元素的“高度”和“宽度”将由偏移量隐式确定。 如果包含块是块级的，则相对于包含块的边界（包括填充）；如果包含块是行级的，则相对于包含块的内容区域。

注意：低版本的ie不兼容！

6、定位对元素的影响

注意：定位不是主页面布局的一种方法，它主要用于管理和微调页面中特殊项目的位置

7. 定位和浮动的区别 7.1 使元素脱离文档流的属性 7.2 性能上的差异