定位:
概念:让元素去某一个位置,去到任意一个你指定的位置
属性:position
取值:
static---------静态定位,元素正常显示(默认值)
relative-------相对定位,相对于自己原有的位置行进位置的改变
参照物:自已原有的位置
absolute-------绝对定位
父子关系中:
1、如果父元素没有定位,此时子元素绝对定位,参照物是浏览器窗口第一屏幕(保证页面有滚动条)
2、如果父元素有定位,此时子元素绝对定位,子元素位置改变,参照物是父元素(找离自己最近的有定位的父元素)
父元素通常使用的定位是相对定位,称之为父相子绝
父元素只要有定位即可(不是静态定位就可以)
fixed---------固定定位,参照物就是浏览器窗口
sticky--------粘性定位,用来实现吸顶效果,参照物是距离最近的有滚动条的容器
位移属性:
元素定位后,需要配合位移属性才能更改元素的位置
top/right/bottom/left
位移属性取值为正数,向元素正中心方向移动
位移属性取值为负数,向元素四周发散方向移动
定位带来的影响:
1、相对定位:
兄弟关系中,元素添加相对定位,后面定位元素会遮盖前面定位元素,产生层叠性
如果想要调整层级关系,需要使用层叠属性
z-index:数值;
默认值:auto;等同于0
取值可以为正数,也可以是负数,数值越大层级越高
注意:z-index只能应用在定位元素上面
2、绝对定位:
1)元素添加绝对定位,会脱离文档流,在页面中不占位置,后面不定位元素会自动补位
2)兄弟关系中,元素添加绝对定位,后面定位元素会遮盖前面定位元素,产生层叠性
如果想要调整层级关系,需要使用层叠属性
z-index:数值;
默认值:auto;等同于0
取值可以为正数,也可以是负数,数值越大层级越高
注意:z-index只能应用在定位元素上面
3、固定定位:
1)元素添加固定定位,会脱离文档流,在页面中不占位置,后面不定位元素会自动补位
2)兄弟关系中,元素添加固定定位,后面定位元素会遮盖前面定位元素,产生层叠性
如果想要调整层级关系,需要使用层叠属性
z-index:数值;
默认值:auto;等同于0
取值可以为正数,也可以是负数,数值越大层级越高
注意:z-index只能应用在定位元素上面
定位与浮动:
区别:
元素添加浮动是半脱离文档流,后面补位元素中的文本内容不会被覆盖,会实现文本环绕效果
元素添加绝对定位是完全脱离文档流,后面补位元素中的文本内容会被覆盖,不会实现文本环绕效果
相同点:
1、如果补位元素中没有文本内容,效果相同
2、都会改变元素类型,变成块元素
3、都可以解决父子关系中,子元素的margin-top作用在父元素上面的问题
如何实现元素水平垂直居中?
1、元素在浏览器窗口水平垂直居中
div{
width:600px;
height:400px;
background-color: red;
position: fixed;
top:50%;
left:50%;
margin-top: -200px;
margin-left: -300px;
}
2、元素在盒子中水平垂直居中
<div class="box">
<div class="inner"></div>
</div>
*{
margin:0;
padding:0;
}
.box{
width:1000px;
height:800px;
background-color: red;
margin:100px auto;
position: relative;
}
.inner{
width:400px;
height:400px;
background-color: green;
position: absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
}
锚点:
用途:在当前页面不同区域进行跳转
应用场景:小说章节目录跳转、通讯录区域
语法:
<a href="#锚点名">第一章</a>
<div id="锚点名"></div>(注意:不能使用class,只能使用id)
锚点名是我们自己起的
<!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;
}
ul{
list-style: none;
}
.list{
width:100px;
height:210px;
/* background-color: pink; */
position: fixed;
top:100px;
left:100px;
}
.list li{
line-height:30px;
text-align: center;
border:1px dashed red;
}
div{
width:1000px;
height:800px;
border:5px solid blue;
margin:0 auto;
font-size: 80px;;
}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#box1"> 第一章</a>
</li>
<li>
<a href="#box2">第二章</a>
</li>
<li>
<a href="#box3">第三章</a>
</li>
<li>
<a href="#box4">第四章</a>
</li>
<li>
<a href="#box5">第五章</a>
</li>
<li>
<a href="#box6">第六章</a>
</li>
<li>
<a href="#box7">第七章</a>
</li>
</ul>
<div id="box1">
111言情小说之霸道总爱上我-----第一章:回国
</div>
<div id="box2">
222若此优秀的倪勇遇到了真命天女,早上去上班我的车被追尾了,下来一看是个白富美,就这样我一见钟情了。。。
</div>
<div id="box3">
333早上来到公司,发现白富美是我的上级领导,就此展开了不懈的追求。。。。
</div>
<div id="box4">
444幸运的事,公司马上开年会了,就这样我们就在一起了。。。。
</div>
<div id="box5">
555在一起的时光也太幸福了,但是突然有一天发生不不行的事情。。。。。
</div>
<div id="box6">
666原来是她有隐瞒我的事情,这些事情我接受不了。。。。。
</div>
<div id="box7">
777到底什么事情呢?请看下集,未完待续。。。。。
</div>
</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;
}
ul{
list-style: none;
}
.list{
width:100px;
height:210px;
/* background-color: pink; */
position: fixed;
top:100px;
left:100px;
}
.list li{
line-height:30px;
text-align: center;
border:1px dashed red;
}
div{
width:1000px;
height:800px;
border:5px solid blue;
margin:0 auto;
font-size: 80px;;
}
</style>
</head>
<body>
<ul class="list">
<li>
<a href="#box1"> 第一章</a>
</li>
<li>
<a href="#box2">第二章</a>
</li>
<li>
<a href="#box3">第三章</a>
</li>
<li>
<a href="#box4">第四章</a>
</li>
<li>
<a href="#box5">第五章</a>
</li>
<li>
<a href="#box6">第六章</a>
</li>
<li>
<a href="#box7">第七章</a>
</li>
</ul>
<div id="box1">
111言情小说之霸道总爱上我-----第一章:回国
</div>
<div id="box2">
222若此优秀的倪勇遇到了真命天女,早上去上班我的车被追尾了,下来一看是个白富美,就这样我一见钟情了。。。
</div>
<div id="box3">
333早上来到公司,发现白富美是我的上级领导,就此展开了不懈的追求。。。。
</div>
<div id="box4">
444幸运的事,公司马上开年会了,就这样我们就在一起了。。。。
</div>
<div id="box5">
555在一起的时光也太幸福了,但是突然有一天发生不不行的事情。。。。。
</div>
<div id="box6">
666原来是她有隐瞒我的事情,这些事情我接受不了。。。。。
</div>
<div id="box7">
777到底什么事情呢?请看下集,未完待续。。。。。
</div>
</body>
</html>