CSS定位总结

青旅半醒 2023-07-11 11:06 19阅读 0赞

# 定位(position) #

## 1. static: ##

在标准流中，就算设置left,right,top,bottom也没有效果

## 2. relative ##

相对自己原来的位置移动

left:20px  自己左边距离20px，元素占据空间不变，周围的static元素不受影响。

应用：把图片一直居中展示：

先把装图片的div（.box）设置为overflow：hidden

然后：.box img\{

positiion:relative;

left:-960px;(图片的一半宽度)  /\*图片向左移动img的一半\*/  (或者transform:translate(-50%))

margin-left:50%;   /\*向右移动父元素（.box）的一半\*/

## 3. fixed固定定位 ##

元素脱离normal flow

可以通过left,right,top,bottom进行定位，定位参照对象是视口（viewPort）

当画布滚动是，固定不动

# #

## 4. absolute绝对定位 ##

元素脱离标准流

可以通过left,right,top,bottom进行定位，  
定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口

定位元素：position的值不为staticd的元素即position的值为relative,absolute,fixed的元素

### 4.1 子绝父相 ###

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

*  父元素设置为position:relative（让父元素成为定位元素，而且父元素不脱离标准流）
 *  子元素设置position:absolute
 *  简称为子绝父相

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70][]

如上图，父元素“手机考拉”不应该脱离标准流，子元素二维码有最好采用绝对定位，则父元素使用相对定位

### 绝对定位技巧 ###

1. 绝对定位元素：positon值为absolute或者fixed的元素

2. 对于绝对定位元素来说：

定位参照对象的宽度=left+right+margin-left+margin-right+绝对定位元素实际占用宽度（上下方向类似）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 2][]

所以，子绝父相的情况下：

1.让完全占据父元素： 子元素设置left:0，right:0(margin-left,margin-right默认为0)的情况下，子元素水平占据父元素

2.让内容居中：当子元素设置了宽高，要使子元素水平居中，可以设置left:0;right:0;margin:0 auto;

absolute的left,right默认为auto,无法确定是否可以左右平分，而手动将left,right设为0，margin-left,margin-right设置为auto,它可以水平居中

## 5. position总结 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 3][]

## 6. 元素的层叠 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 4][]

都是定位元素：后来的元素在原来的元素上面

### 6.1 z-index ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 5][]

ps:

可以脱离标准流的方式：fixed,absolute,float

脱离标准流元素的特点：

1. 可以随意设置宽高

2. 宽高默认由内容决定:

3. 不再受标准流的影响

4. 不向父元素汇报宽高

5. display属性为block，但由于没有父元素，width,height为auto时不知道父元素宽高，看起来很像“inline-block”

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200306111425651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200306170211615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200306172136120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200307120120758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200307121110789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020030712154681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0haUnVu,size_16,color_FFFFFF,t_70