1.调元素的位置 可以使用浮动或者盒模型(实现一些覆盖效果 )
2.定位三要素
- 对象 自己
- 参照物 自己的座位
- 方向 顺时针
定位属性 position
3.属性值
- static 默认值 静态定位 设置或者不设置对元素的位置不影响
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位 css新增的属性值
相对定位
相对定位的使用
属性:position
属性值:relative
特点:
1.相对定位是相对于初始位置进行移动的
2.相对定位不会脱离文档流,依旧占据位置
3.有元素的层叠顺序==默认情况后者覆盖前者=可以通过z-index来调整层叠顺序
4.参考物:盒子本身
- 作用:(工具人) 主要是为了给绝对定位提供参照物
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div>金来同学</div>
文本
</body>
</html>
效果图:
绝对定位
绝对定位的使用
属性:position
属性值:absolute
绝对定位的参照物:默认情况浏览器窗口的第一个屏幕
特点:
1.元素加了绝对定位之后,会脱离文档流,不占据位置,后面元素向前补齐。(区别:浮动无法覆盖文字和图片(半脱离),绝对定位可以覆盖一切(全脱离)====浮动与绝对定位的区别)
2.如果给相邻的多个元素加绝对定位,这些元素会重叠在一起,重叠顺序(层叠顺序、堆叠顺序):默认按照html的书写顺序,后者覆盖前者。(如果想调整元素的堆叠顺序,可以借助z-index来做调整的,这是一个css代码,
不带单位。)
参考物:默认情况浏览器窗口的第一个屏幕
- 如果没有有定位属性的时候就相对于父级位置进行移动
- 如果父级没有定位属性的时候,就会往上级查找 直至找到浏览器
调整布局:
1.方法:使用方位名词
2.一个大盒子与小盒子调整位置===想让父亲变成参照物,前提是父亲必有定位模式(非静态),且儿子盒子都要加绝对、固定、粘性相对定位,不是静态模式就可以。====(口诀:子绝父相----推荐父亲的相对,这种搭配是最好的。)
3.子元素在找参照物的时候:先看父亲有无定位,如果有就是父亲,如果没有就一级一级向上找,如果都没有,就是浏览器的第一屏。
使用场景:实现覆盖效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background: green;
margin: 0 auto;
position: relative;
}
p{
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<div>
<p>同学</p>
文本
</div>
</body>
</html>
效果图:
家父案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../02-reset.css">
<style>
div{
width: 500px;
height: 500px;
border: 2px solid #000;
margin: 100px auto;
position: relative;
}
p{
width: 500px;
height: 500px;
background: url(https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576)
}
ul{
width: 500px;
height: 50px;
/* background: green; */
position: absolute;
bottom: 0;
}
li:nth-child(1){
float: left;
width: 50px;
height: 50px;
background: orange;
text-align: center;
line-height: 50px;
}
li:nth-child(2){
width: 450px;
height: 50px;
background: rgba(00, 00, 00, 0.5);
color: #fff;
float: right;
line-height: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
<ul>
<li>2</li>
<li>马化腾:只有充钱你才能变得更强...</li>
</ul>
</div>
</body>
</html>
效果图:
固定定位
固定定位的使用
属性:position
属性值:fixed
- 特点:
1.固定定位是脱离文档流的,不占据位置。
2.使用场景:实现覆盖效果
3.参考物:浏览器窗口
使用场景:做小广告,做左右两侧的导航:聊天窗口、广告弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
position: fixed;
right: 100px;
bottom: 100px
}
</style>
</head>
<body>
<div>同学</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
效果图:
粘性定位
属性:sticky
特点:不滚动的时候相当于相对定位,滚动的时候相当于固定定位。
使用场景:吸顶效果,比如顶部的导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../02-reset.css">
<style>
div{
width: 100%;
height: 100px;
background: pink;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div>导航</div>
<p>店铺1</p>
<p>店铺2</p>
<p>店铺3</p>
<p>店铺4</p>
<p>店铺5</p>
<p>店铺6</p>
<p>店铺7</p>
<p>店铺8</p>
<p>店铺9</p>
</body>
</html>
效果图:
<!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>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
div {
width: 100%;
height: 80px;
background-color: skyblue;
}
.header {
height: 60px;
background-color: purple;
position: sticky;
top: 10px;
left: 0;
width: 600px;
}
.banner {
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<div class="header"></div>
<div class="banner"></div>
</body>
</html>