教学视频来自P222-P236黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
教学视频来自P222-P236黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
一、静态定位static(了解)
具有标准流的所有特性,没有边偏移,使用很少
二、相对定位relative(重要)
以该元素原先的位置进行移动,以自身原来的位置作为参照点进行移动。
该元素移动后,仍占据原有的位置,不会影响其他元素的位置。
这是两个div,按照标准流进行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative</title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color: pink;
}
.box2{
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
设置上面的div为relativ属性,并进行偏移。增加代码后呈现偏移效果,且不影响下面的box2的位置。
.box1{
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
三、绝对定位absolute(重要)
(1)特点:根据有定位的父元素或祖先元素的位置进行绝对定位,若找不到该父元素,则元素以浏览器为标准进行定位。
(2)要点:父盒子需要加上position: relative;属性才能成为子盒子进行绝对定位的参照点。若子盒子的父盒子没有定位,则继续往上找父盒子,若一直未找到,则以浏览器为父盒子进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.father{
position: relative;
background-color: skyblue;
width: 500px;
height: 500px;
}
.son {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
(3)绝对定位不占有元素原先存在的位置。当前一个son进行绝对定位后,原本在下面的son1占据了son原有的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.father{
position: relative;
background-color: skyblue;
width: 500px;
height: 500px;
}
.son {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
.son1{
width: 200px;
height: 200px;
background-color: hotpink;
}
</style>
<body>
<div class="father">
<div class="son"></div>
<div class="son1"></div>
</div>
</body>
</html>
四、子绝父相
应用:在设计轮播图时,下面的原点以及左右的箭头,可以使用绝对定位来进行设计。
轮播图的父盒子需要用相对定位,保留它原有的位置,防止排版混乱。
五、固定定位fixed(重要)
(1)固定定位不需要找父盒子
(2)固定定位不占有位置,它根据浏览器进行定位,不随滚动条滚动而滚动。
.son{
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: pink;
}
以上代码表示该盒子固定在浏览器右上角。
(3)案例 侧边按钮实现代码
①先通过绝对定位定位到浏览器宽度的一半
②再通过margin进行定位,定位到版心盒子的最右侧
即可实现滚动条滚动时侧边按钮固定不动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.w{
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed{
position: fixed;
/* 1、走到浏览器宽度的一半 */
left: 50%;
/* 2、利用margin走版心盒子宽度的一半 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
</html>
六、粘性定位(不常用)
主要代码为
position: sticky;
top: 0;
功能分别是设置粘性定位,当导航栏移动到距离浏览器顶部0px时,对导航栏进行固定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative</title>
</head>
<style>
body{
height: 3000px;
}
.nav{
position: sticky;
top: 0;
height: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
<body>
<div class="nav">导航栏</div>
</body>
</html>