定位
前言
为什么学习定位?
应用场景:图片上移动的物体、突出的部分、导航栏…
一、定位
- 边偏移
top: 100px;
bottom: ;
left: ;
right: ; - 定位模式
选择器{position: absolute;}
值包含static|relative|absolute|fixed - 完整定位=边偏移+定位模式
二、定位模式
1. 静态定位 static
(1)静态定位是所有元素默认的定位方式,即html的标准流。
(2)对于边偏移无效。
(3)一般用来清除定位
2. 相对定位 relative
(1)以自己的左上角为基准移动
(2)可以通过边偏移继续占有原来的位置
(3)相对定位的元素仍在原来的位置,相对定位不脱标,目的在于移动位置
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:nth-child(2) {
position: relative;
top: 10px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
3. 绝对定位 absolute
绝对定位完全脱标,不占有位置
(1)父级没有定位
如果父级没有定位,则以浏览器为标准定位。
<html>
<head>
<style>
.father {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 10px;
left: 10px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
(2)父级有定位
如果父级有定位,则以父级为基准。
<html>
<head>
<style>
.father {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px;
position: relative;
}
.son {
width: 100px;
height: 100px;
position: absolute;
top: 10px;
left: 10px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
4. 子绝父相
子级是绝对定位,父级只要是定位即可。
相对定位 占有位置 不脱标
绝对定位 不占有位置 脱标
<html>
<head>
<style>
div {
width: 310px;
height: 190px;
border: 1px solid #fff;
margin: 50px;
padding: 10px;
}
.top {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div><!--绝对定位,下面的会跑上去-->
<img src="#.jpg" alt="">
<img src="#.jpg" alt="" class="top">
</div>
</body>
</html>
5. 绝对定位的盒子水平居中
(1)加了绝对定位的盒子,margin: 0 auto; 无效
(2)如何使其水平居中?
水平:left: 50%; margin-left: -w;
垂直:top: 50%; margin-top: -h;
<html>
<head>
<style>
.father {
width: 500px;
height: 300px;
background-color: palegoldenrod;
position: relative;
margin: 0 auto;
}
.son {
width: 100px;
height: 100px;
position: absolute;
background-color: purple;
margin: 0 auto; /*无效*/
left: 250px;
left: 50%; /*父级盒子一半*/
margin-left: -50px;
}
</style>
</head>
<body>
<div class="father"><!--绝对定位,下面的会跑上去-->
<div class="son"></div>
</div>
</body>
</html>
(3)淘宝图例子
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.slider {
width: 500px;
height: 300px;
background-color: palegoldenrod;
position: relative;
margin: 50px auto;
}
.arrow-l,
.arrow-r {
width: 20px;
height: 30px;
position: absolute;
background-color: purple;
display: block;
top: 50%;
margin-top: -10px;
}
.arrow-l {
left: 0;
}
.arrow-r {
right: 0;
}
/*小圆点*/
.circle {
width: 65px;
height: 20px;background-color: rgba(0,0,0,0.3);
position: absolute;
bottom: 15px; /*靠下对齐*/
left: 50%;
margin-left: -32px;
border-radius: 10px 10px;
}
.circle li {
width: 10px;
height: 10px;
background-color: #ccc;
float: left;
margin: 5px 3px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="slider"><!--绝对定位,下面的会跑上去-->
<img src="#.png">
<a href="" class="arrow-l"><img src="#.png"></a>
<a href="" class="arrow-r"><img src="#.png"></a>
<ul class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
6. 固定定位(fixed)
(1)固定定位是绝对定位的特殊形式
(2)固定定位的元素和父亲没有任何关系,只认浏览器
(3)固定定位完全脱标,不占有位置,不随滚动条滚动
(4)例子
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.a {
width: 100%;
height: 10px;
background-color: palegoldenrod;
position: fixed;
}
.box {
width: 100px;
height: 1000px;
background-color: purple;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="box">123</div>
</body>
</html>
7. 叠放次序(z)
叠放次序用于调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,可以取值正整数、负整数、0.
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
div:first-child {
z-index: 1;
}
div:nth-child(2) {
background-color: purple;
top: 30px;
left: 30px;
z-index: 2;
}
div:nth-child(3) {
background-color: skyblue;
top: 60px;
left: 60px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
注意:
- z-index默认属性是0,取值越大,定位元素在层叠元素中越居上
- 如果取值相同,按照书写顺序后来居上
- 后面的数字不能加单位
- 只有相对定位、绝对定位、固定定位有这个属性,其余标准流、浮动、静态定位没有该属性
三、四种定位总结
定位模式
静态定位static:不脱标,正常模式
相对定位relative:不脱标,占有位置,相对自身移动
绝对定位absolute:完全脱标,不占有位置,相对于定位父级移动
固定定位fixed:完全脱标,不占有位置,相对于浏览器移动
四、定位模式转换
(1)和浮动一样,元素添加了绝对定位和固定定位后,元素模式会转换为行内块模式
(2)行内元素如果添加了绝对定位或者固定定位后,不用转换直接给高度和宽度。
<html>
<head>
<style>
div {
height: 200px;
background-color: pink;
/*float: left; 没给盒子宽度,浮动的盒子模式转换*/
/*position: fixed; relative不转换*/
}
span {
background-color: aquamarine;
display: block;
width: 100px;
height: 100px;
float: left; /*如果盒子本身需要添加浮动、绝对定位,则不需要转换*/
}
</style>
</head>
<body>
<div>12345</div>
<span>行内元素</span>
</body>
</html>
标签:定位,14,--,100px,height,color,background,left
From: https://blog.csdn.net/qq_54641174/article/details/141939454