CSS定位
为什么需要定位?
定位
将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子.
定位=定位模式+边偏移.
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置.
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四种.
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
2.边偏移
边偏移就是定位的盒子移动到最终位置,有 top, bottom, left, right 4个属性.
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top : 80px | 定义元素相对其父元素上边线的距离 |
bottom | bottom : 80px | 定义元素相对其父元素下边线的距离 |
left | left : 80px | 定义元素相对其父元素左边线的距离 |
right | right : 80px | 定义元素相对其父元素右边线的距离 |
1.静态定位:
静态定位是元素的默认定位方式,无定位的意思.
语法:
选择器 { position : static ; }
2.相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的.
语法:
选择器 { position : relative ; }
3.绝对定位
绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的.
语法:
选择器 { position : absolute ; }
子绝父相: 子级使用绝对定位,父级使用相对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到.
4.固定定位
固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变.
语法:
选择器 { position : fixed ; }
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位.
固定定位小技巧:固定在版心右侧位置.
有时候定位不一定是按照浏览器可视区的四条边来定位的,有时候会靠着版心的一侧定位.比如下图中的小箭头图标
小算法:
做出来就是类似的效果.
5.粘性定位(了解)
粘性定位可以被看做是相对定位和固定定位的混合
语法:
选择器 { position : sticky ; }
跟页面滚动搭配使用,兼容性比较差,IE不支持(该死的IE浏览器!!)
定位总结:
定位叠放次序: z-index
在使用定位布局时,可能会出现盒子重叠的情况.此时,可以使用z-index来控制盒子的前后次序.
语法:
选择器 { z-index : 1 ;}
绝对定位的盒子居中
想要实现绝对定位盒子的居中,想要用原来的margin:auto是会失效的(相对定位是可以的!!!),我们可以试验一下.
可以看到是无效的
这个时候我们采取的方法是:先让盒子left:50%,然后距离左边距一半自身盒子宽度的距离,水平居中和垂直居中的原理是相同的.
定位拓展:
绝对定位和固定定位也和浮动类似.
浮动元素,绝对定位(固定定位)元素的都不会触发外边距合并的问题.
绝对定位(固定定位)会完全压住盒子.
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),因为浮动产生的初衷就是做出文字围绕的效果.但是绝对定位(固定定位)会压住下面标准流所有的内容.
案例
接下来,我们做一个淘宝轮播图的案例,但是图片的切换效果还要等到学了JS才能实现,我们现在只能先做一个简略版(一张图片上左右两侧有小箭头,可以切换图片,下边有一条小的导航栏,也可以切换图片)
做完了,展示一下完整的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝焦点图</title>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
text-align: center;
line-height: 30px;
}
.tb-promo img {
width: 520px;
height: 280px;
}
/* 并集选择器可以将公共部分写在一起,节约代码 */
.prev,
.next {
/* 加了绝对定位的行内元素可以直接设置宽度和高度 */
position: absolute;
top: 50%;
width: 20px;
height: 30px;
background-color: rgba(0,0,0,.3);
color: white;
}
.prev {
left: 0;
border-radius: 0 15px 15px 0;
}
.next {
/* 如果一个盒子既有left属性也有right属性,默认执行left属性 */
/* 同理,会执行top属性 */
right: 0;
border-radius: 15px 0 0 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255,255,255,.3);
border-radius: 7px;
}
.promo-nav li {
float: left;
height: 8px;
width: 8px;
border-radius: 4px;
background-color: #fff;
margin: 3px;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../images/taobao.jpg" alt="">
<!-- 左箭头 -->
<a href="#" class="prev"> < </a>
<!-- 右箭头 -->
<a href="#" class="next"> > </a>
<!-- 导航栏 -->
<ul class="promo-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
注意: 如果一个盒子既有left属性也有right属性,默认执行left属性,同理,会执行top属性
今天先到这里吧,总共看了16个视频,效率还算挺高的,刚刚看了下B站的其他视频,又对要不要继续学前端产生了动摇,因为据说小企业的前端相当于全栈...我真的学得完,学得会吗?且后端需要强大的逻辑能力,我是肯定没有的...真的好害怕啊...但还是加油继续学吧...昨天又学了下Python,突然感觉忘记了好多东西,啥也不会了,我觉得我还是集中精力学习前端吧,赶紧把视频看完!