css定位（CSS定位）-前端-引导者

本文目录一览：

1、CSS中，定位是通过定位属性来实现的，包括三种常用的定位：相对定位、绝对定位和固定定位。相对定位（position： relative）：相对定位是相对于元素本身原有位置的定位方式。

2、定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

3、绝对定位和固定定位的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。

用绝对定位css定位，把两个都放在一个大的DIV里面，大的设置成position：relaitve。第一个小DIV属性设置成为position：absolutecss定位； z-index：1。第二个小DIV属性设置成为position：absolutecss定位； z-index：2。

可以使用css中的position来对div进行定位来改变div的位置，position 属性值的含义：static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

所以在写代码之前要先计算好容器的大小及padding。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "css定位；left， top， right 以及 bottom 属性进行规定。fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

静态定位 position：static；默认值，不写position相当于写上position：static；以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。

通过定位实现：position.定义和用法：position 属性规定元素的定位类型。说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

1、text-align：rightcss定位；搭配空字符来实现图片右居中 float：right；直接实现 position：absolute/relative/fixed；通过设置定位css定位的位置实现。复合方式实现css定位，例如在图片前面搭配一个然后将图片挤到右边。

2、在css标签内css定位，设置div的高度、宽度、位置属性为绝对定位，同时使用left和top设置居中显示，从而实现图片在网页中居中显示。

3、绝对定位和固定定位的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其css定位他文档流元素会占据其原来位置。

4、实现原理是设置margin自动适应，然后设置定位的上下左右都为0。

5、利用margin： 0 auto实现图片居中，就是在图片上加上css样式margin： 0 auto 如下：设置imgBox的样式如下：此时的效果如下：（图片在容器内，水平居中）css图片垂直居中。css代码如下，使用flex布局实现。