定位
目标
* **理解**
* 能说出为什么要用定位
* 能说出定位的4种分类
* 能说出四种定位的各自特点
* 能说出我们为什么常用子绝父相布局
* **应用**
* 能写出淘宝轮播图布局
一、CSS布局的三种机制
网页布局的核心 —— 就是**用 CSS 来摆放盒子位置**。
CSS 提供了 **3 种机制**来设置盒子的摆放位置,分别是**普通流**、**浮动**和**定位**,其中:
1. **普通流**(**标准流**)
2. **浮动**
* 让盒子从普通流中**浮**起来 —— **让多个盒子(div)水平排列成一行**。
3. **定位**
* 将盒子**定**在某一个**位**置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位,特别是后面的 js 特效。
二、为什么使用定位
1. 小黄色块**在图片上移动,**吸引用户的眼球
2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的
例如下面这种效果:图片中的两个左右箭头不能使用浮动,因为浮动不能盖住文字和图片,只能使用定位
将盒子**定**在某一个**位**置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
所以,我们脑海应该有三种布局机制的上下顺序
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 (天空)
三、定位详解
定位 = 定位模式 + 边偏移
3.1 边偏移
3.2 定位模式
选择器 { position: 属性值; }
3.2.1 静态定位
- **静态定位**是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。
- 静态定位 按照标准流特性摆放位置,它没有边偏移。
- 静态定位在布局时我们几乎不用的
3.2.2 相对定位(重要)
相对定位的特点:(务必记住)
- 相对于 自己原来在标准流中位置来移动的
- 原来**在标准流的区域继续占有**,后面的盒子仍然以标准流的方式对待它。
3.2.3 绝对定位(重要)
**绝对定位**是元素以带有定位的父级元素来移动位置 (拼爹型)
1. **完全脱标** —— 完全不占位置;
2. **父元素没有定位**,则以**浏览器**为准定位(Document 文档)。
3. **父元素要有定位**
* 将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
绝对定位的特点:(务必记住)
- 绝对是以带有定位的父级元素来移动位置 (拼爹型) 如果父级都没有定位,则以浏览器文档为准移动位置
- 不保留原来的位置,完全是脱标的。
因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。
如果父元素没有定位,就以文档为准移动位置,如果父元素有定位,就以父元素为准移动位置
口诀:子绝父相
为什么子元素使用绝对定位,父元素要使用相对定位呢?
例如上面的图片案例,有上下两个盒子,第一个盒子左右两端有两个箭头,把鼠标放在肩头上,箭头下面的图片可以左右滚动
要实现这种效果,第一个盒子的箭头元素必须使用绝对定位,第一个盒子也要使用一个定位,假如使用绝对定位,由于绝对定位不占位置,第一个盒子加上绝对定位以后,第二个盒子就会上浮占据第一个盒子的位置,因此需要使用相对定位,相对定位是占有位置的,下面第二个盒子就不会上浮
1. **方向箭头**叠加在其他图片上方,应该使用**绝对定位**,因为**绝对定位完全脱标**,完全不占位置。
2. **父级盒子**应该使用**相对定位**,因为**相对定位不脱标**,后续盒子仍然以标准流的方式对待它。
* 如果父级盒子也使用**绝对定位**,会完全脱标,那么下方的**广告盒子**会上移,这显然不是我们想要的。
**结论**:**父级要占有位置,子级要任意摆放**,这就是**子绝父相**的由来。
3.2.4 固定定位(重要)
固定定位**是**绝对定位**的一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
1. **完全脱标** —— 完全不占位置;
2. 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置;
* 跟父元素没有任何关系;单独使用的
* 不随滚动条滚动。
四、定位的扩展
4.1 绝对定位/固定定位的盒子居中
绝对定位/固定定位的盒子**不能通过设置 `margin: auto` 设置**水平居中
1. `left: 50%;`:让**盒子的左侧**移动到**父级元素的水平中心位置**;
2. `margin-left: -100px;`:让盒子**向左**移动**自身宽度的一半**。
3.此外,在CSS3中有一个translate值,可以实现盒子移动自身宽度的一半,这个方法在移动web端尤其针对盒子宽度不确定的时候可以使用
transform: translate(-50%);
4.2 堆叠顺序
`z-index` 的特性如下:
1. **属性值**:**正整数**、**负整数**或 **0**,默认值是 0,数值越大,盒子越靠上;
2. 如果**属性值相同**,则按照书写顺序,**后来居上**;
3. **数字后面不能加单位**。
**注意**:`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素,其他**标准流**、**浮动**和**静态定位**无效。
4.3 改变display属性
display 是 显示模式, 可以改变显示模式有以下方式:
* 可以用inline-block 转换为行内块
* 可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
* 绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。
行内块的宽度默认是内容的宽度
一个行内的盒子,如果加了**浮动**、**固定定位**和**绝对定位**,不用转换,就可以给这个盒子直接设置宽度和高度等
定位的盒子很多情况下需要单写宽度,如果需要通栏,宽度给100%
五、淘宝轮播图案例分析
分析:
第一步.、确定布局
一个大盒子先装里面包括四个子盒子:一张图片、两个左右箭头、一个轮播盒子
<body> <div class="taobao"> <!-- 左按钮 --> <!-- 浮动压不住图片和文字,定位可以 --> <a href="#" class="arr-l"> < </a> <!-- 图片 --> <img src="images/taobao.jpg" alt=""> <!-- 右按钮 --> <a href="#" class="arr-r"> > </a> <!-- 小圆点 --> <ul class="circle"> <li></li> <li class="current"></li> <li></li> <li></li> <li></li> </ul> </div> </body>
第二步、左右箭头盒子
由于箭头盒子是要位于图片上方
1.标准流无法实现这种布局
2.如果使用浮动,因为图片和文字是不能被覆盖住的,因此不能使用浮动
3.使用定位,如果使用相对定位,子盒子在标准流中的位置仍然会保存
使用绝对定位,子盒子在标准流中的位置不会被保存——因此使用绝对定位(子绝父相)
4. 圆角矩形的设置
圆角矩形可以为4个角分别设置圆度, 但是是有顺序的
```
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
```
* 如果4个角,数值相同
border-radius: 15px;
* 里面数值不同,我们也可以按照简写的形式,具体格式如下:
border-radius: 左上角 右上角 右下角 左下角;
还是遵循的顺时针。
.arr-l { /* 必须使用定位 */ /* 相对定位会占据位置,只能使用绝对定位 子绝父相*/ position: absolute; /* 垂直居中公式:1.先走父亲高度的50% */ top: 50%; /* 2.再往上走自己高度的一半 */ margin-top: -15px; left: 0; /* 绝对定位的盒子 无需转换 直接给大小就可以 */ width: 20px; height: 30px; background: rgba(0,0,0,.2); /* 设置文字的颜色位置 */ text-decoration: none; color: #fff; /* 文字水平居中 */ text-align: left; /* 单行文本垂直居中 */ line-height: 30px; /* 圆角矩形 */ border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
.arr-l:hover, .arr-r:hover { background: rgba(0,0,0,.4); }
第三步、轮播盒子
这个盒子和左右箭头一样也需要使用绝对定位,然后让绝对定位的盒子水平居中,然后写里面的小圆点的样式,用到了border-radius
.circle { position: absolute; /* 绝对定位的盒子水平居中 */ left: 50%; margin-left: -35px; bottom: 15px; width: 70px; height: 17px; background-color: pink; background: rgba(255,255,255,.3); border-radius: 7px; } .circle li { float: left; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; list-style: none; margin: 4px 3px; } .circle .current { background-color: #ff5000; }
六、固定定位案例
蓝色矩形,紫色版心宽度为1200px
.fixedbar { position: fixed; top: 0; left: 50%; margin-left: -780px; width: 180px; height: 420px; background-color: blue; }
七、定位总结
注意:
- 边偏移需要和定位模式联合使用,单独使用无效
- top和bottom不要同时使用
- left和right不要同时使用