目录
一、什么是定位？
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
position样式设置定位
可选值：
static 默认值，不开启定位
relative 开启相对定位
absolute 开启绝对定位
fixed 开启固定定位
sticky 开启粘滞定位
二、定位的类型
1、相对定位
开启相对定位的特点：
position: relative; 开启相对定位
1、元素位置不发生变化，不会脱离文档流
2、开启定位后，元素需要配合偏移量去改变元素的位置
3、相对定位原点是其原来在文档流中的位置
4、开启相对定位后，元素的层级变高了
2、绝对定位
开启绝对定位的特点
开启绝对定位
position: absolute;
1、元素会脱离文档流，也就是不会区分块元素，行内元素，行内块元素
2、元素的位置没有发生改变，需要配合偏移量使用
3、绝对定位的原点是参照其包含块来定位的，
一般情况，会给其父元素设置相对定位，叫“父相子绝”，但根据项目需要
4、开启绝对定位，元素的层级也会提高
包含块是什么？
1、没有定位的时候，包含块就是其父元素
2、有定位的时候，包含块就是离它最近的，开启定位的祖先元素，
如果其祖先元素，都没有开启定位，那包含块就是根元素（html）
3、固定定位
开启固定定位的特点
开启固定
position: fixed;
1、开启固定定位，会使元素脱离文档流，就不会区分块元素，行内元素，行内块元素
2、开启固定定位，元素不会随着滚动条的滚动而滚动
3、也是配合偏移量移动元素，元素的原点是浏览器的视口（html根标签）
4、元素的层级也会提高
5、常用的场景
顶部导航，侧边导航，广告···
4、粘滞定位
开启粘滞定位的特点
开启粘滞定位
position: sticky;
1、元素不会脱离文档流
2、元素的位置没有发生改变，也是配合偏移量使用
一般情况是配合top使用,
元素在没有到top值的时候，元素是随着滚动条的滚动而滚动，
当到达设置的top值后，元素就固定了，不会随着滚动条滚动而滚动
3、粘滞原点也是参考浏览视口
4、层级也会提高
三、如何设置层级
1、设置层级
设置层级 z-index: ;
默认是0，数值越大，层级越高
注意：
1、必须要开启定位
2、父元素的层级不会高于子元素，也就是说父元素不会覆盖子元素
1:如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
注意：
对于没有开启定位的元素不能使用z-index
父元素的层级再高，也不会盖住子元素
2:设置元素的透明背景
opacity [əu'pæsiti] 可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
四、如何使一个元素垂直水平居中
<!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>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
/* 开启相对定位 */
position: relative;
}
/* 元素水平垂直居中 方式一*/
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0px;
right: 0px;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">1</div>
</div>
</body>
</html>水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
-当开启决定定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
也就是说水平方向9个值相加，必须要等其父元素内容区的宽度
-当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
2:如果有auto，则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
1个auto 谁是auto，调整谁
2个auto
margin width 为auto 调整width
margin left 为auto 调整left
margin right 为auto 调整right
width left 为auto 调整left
width right 为auto 调整right
left right 为auto 调整right
3个auto
margin width left 调整left
margin width right 调整right
width left right 调整right
margin left right 调整right
4个auto
margin width left right为auto 调整right
五、案例
淘宝美食汇
css代码
.box {
width: 680px;
height: 280px;
background-color: rgb(34, 168, 212);
margin: 30px auto;
position: relative;
}
img {
width: 200px;
height: 110px;
/* opacity: 0.2; */
}
* {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
margin: 10px;
position: relative;
}
.box>ul>li:nth-of-type(4) {
clear: both;
}
.box1 {
position: relative;
}
.img1 {
width: 60px;
height: 20px;
position: absolute;
left: 70px;
top: -100px;
}
.img2 {
width: 20px;
height: 20px;
position: absolute;
left: 10px;
top: -70px;
}
.img3 {
width: 20px;
height: 20px;
position: absolute;
left: 180px;
top: -70px;
}
.xian {
width: 190px;
height: 20px;
border-bottom: 1px solid white;
position: absolute;
left: 10px;
top: -60px;
text-align: center;
color: white;
font-size: 12px;
}
.cakan {
color: white;
width: 70px;
height: 20px;
border-radius: 10px;
border: 1px solid white;
left: 50px;
top: -35px;
font-size: 10px;
text-align: center;
position: absolute;
}
.box1 {
display: none;
}
li:hover>.box1 {
display: block;
}
li:hover>.imgg {
opacity: 0.8;
}
li:hover>p {
display: none;
}
p {
color: white;
font-size: 14px;
width: 200px;
position: absolute;
left: 0px;
top: 92px;
background-color: rgba(96, 95, 96, 0.5);
text-align: center;
}html代码
<div class="box">
<ul>
<li><img src="./images/1.webp" alt="" class="imgg">
<p>口水菌品鉴│宅男宅女觅食记</p>
<div class="box1">
<img src="./images/1.png" alt="" class="img1">
<img src="./images/2.png" alt="" class="img2">
<img src="./images/3.png" alt="" class="img3">
<div class="xian">口水菌品鉴│宅男宅女觅食记</div>
<div class="cakan">立即查看</div>
</div>
</li>
<li><img src="./images/2.webp" alt="" class="imgg">
<p>外酥里嫩，韩式炸蟹肉</p>
<div class="box1">
<img src="./images/1.png" alt="" class="img1">
<img src="./images/2.png" alt="" class="img2">
<img src="./images/3.png" alt="" class="img3">
<div class="xian">外酥里嫩，韩式炸蟹肉</div>
<div class="cakan">立即查看</div>
</div>
</li>
<li><img src="./images/3.webp" alt="" class="imgg">
<p>寒冬福利:火锅燥起来。</p>
<div class="box1">
<img src="./images/1.png" alt="" class="img1">
<img src="./images/2.png" alt="" class="img2">
<img src="./images/3.png" alt="" class="img3">
<div class="xian">寒冬福利:火锅燥起来。</div>
<div class="cakan">立即查看</div>
</div>
</li>
<li><img src="./images/4.webp" alt="" class="imgg">
<p>弄碗蟹黄豆腐开开荤</p>
<div class="box1">
<img src="./images/1.png" alt="" class="img1">
<img src="./images/2.png" alt="" class="img2">
<img src="./images/3.png" alt="" class="img3">
<div class="xian">弄碗蟹黄豆腐开开荤</div>
<div class="cakan">立即查看</div>
</div>
</li>
<li><img src="./images/5.webp" alt="" class="imgg">
<p>好吃又好看，难以抗拒日本美食</p>
<div class="box1">
<img src="./images/1.png" alt="" class="img1">
<img src="./images/2.png" alt="" class="img2">
<img src="./images/3.png" alt="" class="img3">
<div class="xian">好吃又好看，难以抗拒日本美食</div>
<div class="cakan">立即查看</div>
</div>
</li>
<li><img src="./images/6.webp" alt="" class="imgg">
<p>冬天来了，吃点东西滋补一下</p>
<div class="box1">
<img src="./images/1.png" alt="" class="img1">
<img src="./images/2.png" alt="" class="img2">
<img src="./images/3.png" alt="" class="img3">
<div class="xian">冬天来了，吃点东西滋补一下。</div>
<div class="cakan">立即查看</div>
</div>
</li>
</ul>
</div>
效果展示
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
