定位的含义
让页面中的某一个元素, 相对于某一个位置,或者是去某一个位置,进行显示
定位的属性
position:位置/定位
定位的取值
1)静态定位
也叫做普通文档流定位,默认的排列方式,元素是横向显示,就横向显示,如果是纵向显示的话就纵向显示
static;默认值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;padding:0
}
.red{
width: 100px;
height:100px;
background-color: red;
/* 静态定位 */
position: static;
top:100px;
left:100px;
}
.green{
width: 150px;
height: 150px;
background-color: green;
}
.blue{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!--
静态定位
也叫做普通文档流定位,默认的排列方式,元素是横向显示,就横向显示,如果是纵向显示的话就纵向显示
static;默认值;
注意:添加偏移属性也不会让元素位置改变;默认值,实际开发的时候不会使用它
-->
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>2)相对定位
相对于自己元素来的位置,进行微调,
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>
<style>
* {
margin: 0;
padding: 0
}
.red {
width: 100px;
height: 100px;
background-color: red;
/* 相对定位 */
position: relative;
/* top:50px;
left:50px; */
/* bottom: 50px;
right:50px; */
/* top:-50px;
left:-50px; */
}
.green {
width: 150px;
height: 150px;
background-color: green;
position: relative;
top: 100px;
left: 100px;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<!--
相对定位
相对于自己元素来的位置,进行微调,
relative;
参照物:自己原来的位置;
-->
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>3)绝对定位
a)子元素使用绝对定位,外边的父级元素,没有定位,则子元素位置调整参照的是浏览器左上角的body位置进行调整
b)子元素使用绝对定位,外边的父级元素,有定位(一般:相对),则子元素参照位置是父元素的左上角进行位置调整
absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;padding:0
}
body{
height: 10000px;
}
.red{
width: 500px;
height:500px;
background-color: red;
margin:0 auto;
/* 定位:相对 */
position: relative;
}
.green{
width: 300px;
height: 300px;
background-color: green;
margin:0 auto;
/* 定位:相对 */
/* position: relative; */
}
.blue{
width: 100px;
height:100px;
background-color: blue;
/* 绝对定位 */
position: absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<!--
绝对定位
a)子元素使用绝对定位,外边的父级元素,没有定位,则子元素位置调整参照的是浏览器左上角的body位置进行调整
b)子元素使用绝对定位,外边的父级元素,有定位(一般:相对),则子元素参照位置是父元素的左上角进行位置调整
就近的父元素
规则:父相子绝,子绝父相
absolute;
-->
<div class="red">
<div class="green">
<div class="blue"></div>
</div>
</div>
</body>
</html>4)固定定位
元素是以浏览器窗口位置进行调整的;不会受到滚动条的影响
fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
.box{
width: 300px;
height: 200px;
background-color: orange;
/* 添加定位 :注意:只要你添加了固定定位,默认参照位置是浏览器窗口左上角*/
position: fixed;
top:0px;
left:0px;
}
.info{
width: 1200px;
height:1500px;
background-color: aqua;
margin:0 auto;
}
</style>
</head>
<body>
<!--
不会受到滚动条的影响;参照位置:浏览器窗口位置
-->
<div class="info">我是页面的主要区域位置</div>
<div class="box">我是一个普通的盒子</div>
</body>
</html>5)粘性定位
相对定位和固定定位的一个结合体,只使用用来实现一个效果:滚动吸顶的效果;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;padding:0
}
.header{
height:100px;
background-color: red;
font-size: 60px;
text-align: center;
line-height: 100px;
}
.nav{
width: 1200px;
height: 80px;
background-color: orange;
text-align: center;
line-height: 80px;
font-size: 40px;
margin:0 auto;
/* 定位:粘性定位 */
position: sticky;
top:30px
}
.section{
height:1500px;
background-color: green;
font-size: 200px;
}
</style>
</head>
<body>
<!--
粘性定位:用来实现滚动吸顶的一个效果
position:sticky
-->
<div class="header">我是头部区域</div>
<div class="nav">我是导航区域</div>
<div class="section">我是主体区域</div>
<div class="footer">我是尾部区域</div>
</body>
</html>注意事项: 所有定位的属性和属性值使用的时候,如果想要实现定位效果必须配合偏移属性,才能实现
大部分水平和垂直方向使用一个; 定位元素的起点:左上角为起点
top:与上面有多少距离
right:与右面有多少距离
bottom:与下面有多少距离
left:与左面有多少距离
定位的特殊情况(主要研究:相对,绝对,固定)
1)都给元素添加定位?
1.有定位的元素,显示级别(层次)要比没有定位的级别要高,会把没有定位的元素遮盖住
2.如果多个元素都有定位的话,则默认后面的会这盖住前面的元素
3.注意事项:相对定位没有吧原来的位置让出来,但是你的绝对定位和固定定位是脱离文档流的
如何调整被这盖住的显示层级顺序?
z-index:数值 默认值为:auto; 后面遮盖前面; 但是auto可以理解成0
得出:z-index取值越大显示层级越高(可正可负)
z-index使用,必须添加在已有定位的元素中;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
/* position: relative;
top:30px;
left: 30px; */
/* position: absolute; */
position: fixed;
/* z-index:100 */
z-index:-1
}
.green {
width: 150px;
height: 150px;
background-color: green;
/* position: relative;
top:10px;
left: 80px; */
/* position: absolute; */
position: fixed;
/* z-index: 90; */
z-index: -50;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
/* position: relative; */
/* position: absolute; */
position: fixed;
z-index: -100 ;
}
/*
1.有定位的元素,显示级别(层次)要比没有定位的级别要高,会把没有定位的元素遮盖住
2.如果多个元素都有定位的话,则默认后面的会这盖住前面的元素
3.注意事项:相对定位没有吧原来的位置让出来,但是你的绝对定位和固定定位是脱离文档流的
如何调整被这盖住的显示层级顺序?
z-index:数值 默认值为:auto; 后面遮盖前面; 但是auto可以理解成0
得出:z-index取值越大显示层级越高
*/
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>定位与浮动的区别是啥?
不同点:
1)不同点含义不同:
浮动:半脱离文档流,如果你补位元素中有文本的话,会出现文本环绕的效果;
定位:全脱离文档流,无论是否有文本,都不会产生环绕效果
2)不同点作用不同
浮动主要为了布局横向显示,定位主要是用于位置调整
相同点:
1)都属于脱离文档流的一种,如果后面补位元素没有文本,实现效果一致;
2)解决margin-top外边距重合问题:触发了BFC
3)都能让元素变成块元素
4)能解决3px的问题(应用频率比较低)
5)绝对定位和固定定位和浮动会让margin:0 auto失效;因为margin:0 auto只针对的是普通文档流中的元素水平居中
6)浮动,绝对,固定定位会让自适应(不设置宽度)的盒子继续自适应,这次的自适应是被文本撑开的;
3)定位与margin:0 auto之间会产生什么特殊情况
绝对定位和固定定位会让margin:0 auto失效,但是我们的相对定位不会让margin:0 auto失效;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
.red {
width: 200px;
height: 200px;
background-color: red;
/* float: left; */
position: absolute;
}
.green {
width: 500px;
height: 500px;
background-color: green;
}
p {
/* width: 1000px; */
height: 100px;
background-color: green;
/* margin: 0 auto; */
/* float: left; */
position: fixed;
}
</style>
</head>
<body>
<!--
定位与浮动的区别
不同点:
1)不同点含义不同:
浮动:半脱离文档流,如果你补位元素中有文本的话,会出现文本环绕的效果;
定位:全脱离文档流,无论是否有文本,都不会产生环绕效果
2)不同点作用不同
浮动主要为了布局横向显示,定位主要是用于位置调整
相同点:
1)都属于脱离文档流的一种,如果后面补位元素没有文本,实现效果一致;
2)解决margin-top外边距重合问题:触发了BFC
3)都能让元素变成块元素
4)能解决3px的问题(应用频率比较低)
5)绝对定位和固定定位和浮动会让margin:0 auto失效;因为margin:0 auto只针对的是普通文档流中的元素水平居中
6)浮动,绝对,固定定位会让自适应(不设置宽度)的盒子继续自适应,这次的自适应是被文本撑开的;
-->
<p>
你好呀我是一个p标签
</p>
<!-- <div class="red"></div>
<div class="green">
我姓李, 了利益 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, tempora tenetur, earum quos officiis placeat magnam, velit voluptates ipsam illum labore ratione similique dolor architecto. Dignissimos fugit perspiciatis a hic.
Deleniti, nulla odio quaerat beatae accusamus vel modi doloribus repellendus ex quas nisi doloremque harum esse consequatur minus recusandae quisquam ipsa! Tenetur dicta ullam laudantium? Quos alias dolorum facilis harum.
Similique soluta, nihil et dicta libero in a adipisci, aliquam doloremque sint eum exercitationem voluptates consequuntur deserunt debitis qui, itaque veniam ab nobis? Mollitia et commodi eos reprehenderit, magni accusantium?
Laboriosam veniam, non iure, totam laborum nemo nobis harum ipsa sit porro temporibus, esse voluptates quisquam saepe labore nisi eaque libero? Provident quasi laborum eveniet accusamus cumque, excepturi pariatur illo!
Voluptates cum cupiditate quo, veritatis optio perferendis incidunt impedit doloribus sequi omnis provident nostrum adipisci reprehenderit sunt voluptatum nihil quod ipsam asperiores dolorum ad beatae repudiandae voluptatem, pariatur iste? Ex.
</div> -->
</body>
</html>定位与自适应(宽度不设置的块元素)会产生什么情况
绝对定位和固定定位,会让自适应的盒子,继续自适应,只不过这次的自适应是被文本/内容撑开的
相对定位不会让自适应失效;
父相子绝中,父元素能否使用其他的定位
能使用其他定位,但是不推荐,我们推荐你使用相对;为啥:原因固定和绝对定位有弊端:会上margin:0 auto失效等问题
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
