定位=边偏移+定位模式
边偏移:top、bottom、left、right
不要使用相对的边偏移属性
定位模式
语法：
选择器 { position：属性值 ；}
static静态定位 默认定位方式，无定位的意思。
按照标准流的特性摆放位置，它没有边偏移
相对定位 relative：相对于自身在标准流中的位置来说
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
background-color: purple;
position: relative;
left: 100px;
top: 100px;
/*box-shadow: -100px -100px 3px 0 pink;*/
}
</style>
<body>
<div ></div>
<div class="box2">box2 设置相对定位</div>
<div ></div>
</body>
绝对定位 absolute：
1、完全脱标
2、父元素没有没有定位，则以浏览器为准定位
3、父元素有定位，元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
<style>
.yeye {
width: 500px;
height: 500px;
background-color: skyblue;
position: absolute;
}
.father {
width: 350px;
height: 350px;
background-color: pink;
margin: 100px;
/*标准流的子盒子总是以父级为准移动位置*/
/*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/
/*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/
/*position: relative;*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
/*margin-left: 100px;*/
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
定位口诀-----子绝父相
因为父级要占用位置，子元素不用占用位置。任意摆放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.up { |
position: relative;
width: 1000px;
height: 90px;
background-color: pink;
}
.down {
width: 1000px;
height: 150px;
background-color: #000;
}
.arr-l {
position: absolute;
top: 25px;
left: 0;
width: 40px;
height: 40px;
background-color: purple;
}
.arr-r {
position: absolute;
top: 25px;
right: 0;
width: 40px;
height: 40px;
background-color: purple;
}
</style>
</head>
<body>
<div class="up">
<img src="[images/img.jpg](images/img.jpg)" alt="">
<div class="arr-l"></div>
<div class="arr-r"></div>
</div>
<div class="down"></div>
</body>
</html>
固定定位：fixed 绝对定位的一种特殊形式
1、完全脱标---完全不占位置
2、只认浏览器的可视窗口---跟父元素没有任何关系，单独使用；不随滚动条滚动
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Document</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | } |
| | .box { |
| | width: 1002px; |
| | margin: 0 auto; |
| | margin-top: 44px; |
| | } |
| | .ad-l { |
| | position: fixed; |
| | top: 100px; |
| | left: 0; |
| | } |
| | .ad-r { |
| | position: fixed; |
| | top: 100px; |
| | right: 0; |
| | } |
| | .top { |
| | /*因为没有写宽度 默认的宽度是内容的宽度*/ |
| | /*此时我们需要给这个top 盒子 通栏的盒子*/ |
| | /*所以以后，定位的盒子，很多情况下，需要单写宽度*/ |
| | /*所以以后，定位的盒子，如果需要通栏 那我们宽度就给 100%*/ |
| | width: 100%; |
| | position: fixed; |
| | top: 0; |
| | height: 44px; |
| | /*background-color: pink;*/ |
| | text-align: center; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="top"> |
| | <img src="[images/top.png](images/top.png)" alt=""> |
| | </div> |
| | <!-- 左右的固定定位 --> |
| | <img src="[images/ad-l.png](images/ad-l.png)" alt="" class="ad-l"> |
| | <img src="[images/ad-r.png](images/ad-r.png)" alt="" class="ad-r"> |
| | <div class="box"> |
| | <img src="[images/box.png](images/box.png)" alt=""> |
| | </div> |
| | </body> |
| | </html> |
绝对定位的盒子居中：
注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
Image 2.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
/*标准流中的盒子水平居中对齐 用margin:auto*/
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background-color: #fff;
border: 1px solid red;
}
.one,
.two,
.three,
.four {
width: 100px;
height: 100px;
/*子绝父相*/
position: absolute;
}
.one {
/*定位居中*/
top: 0; /*顶对齐*/
left: 50%;
margin-left: -50px;
background-color: pink;
}
.two {
/*定位居中*/
bottom: 0; /*底对齐*/
left: 50%;
margin-left: -50px;
background-color: skyblue;
}
.three {
/*定位居中*/
top: 50%;
margin-top: -50px;
background-color: purple;
}
.four {
/*定位居中*/
right: 0;
top: 50%;
margin-top: -50px;
background-color: yellow;
}
.center {
position: absolute;
/*水平居中*/
left: 50%;
margin-left: -50px;
/*垂直居中*/
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="one"> 横向水平居中顶对齐 </div>
<div class="two"> 横向水平居中底对齐 </div>
<div class="three"> 垂直居中左对齐 </div>
<div class="four"> 垂直居中右对齐 </div>
<!-- 水平 和 垂直 居中 -->
<div class="center"></div>
</div>
</body>
</html>
堆叠顺序z-index
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：
Image 3.png
z-index 的特性如下：
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上；
- 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.damao,
.ermao,
.sanmao {
/*绝对定位*/
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
.damao {
z-index: 2;
/*数值越大越靠上
后面不跟单位
只能是整数*/
}
.ermao {
top: 50px;
left: 50px;
z-index: 1;
background-color: green;
}
.sanmao {
top: 100px;
left: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="damao"></div>
<div class="ermao"></div>
<div class="sanmao"></div>
</body>
</html>
定位改变display属性：一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
/*float: left;*/
position: absolute;
width: 500px;
height: 500px;
background-color: pink;
}
.son {
/*float: left;*/
/*position: absolute;*/
width: 200px;
height: 200px;
background-color: purple;
/*外边距合并*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
综合案例：
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>淘宝轮播图</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | } |
| | li { |
| | list-style: none; |
| | } |
| | .taobao { |
| | /*子绝父相*/ |
| | position: relative; |
| | width: 520px; |
| | height: 280px; |
| | background-color: pink; |
| | margin: 100px auto; |
| | } |
| | /*并集选择器 集体声明 让代码更简洁*/ |
| | .arrow-l, |
| | .arrow-r { |
| | /*只能用定位来做，才能压住盒子*/ |
| | /*不要占有位置 随便移动位置 必须用绝对定位*/ |
| | position: absolute; |
| | /*垂直居中公式*/ |
| | /*1\. 走父级高度的 50%*/ |
| | top: 50%; |
| | /*2\. 往上走 自己高度 的一半*/ |
| | margin-top: -15px; |
| | /*绝对定位的盒子 无须转换，直接给大小就好了*/ |
| | width: 20px; |
| | height: 30px; |
| | background: rgba(0, 0, 0, .2); |
| | text-decoration: none; |
| | color: #fff; |
| | /*text-align: center;*/ |
| | line-height: 30px; |
| | } |
| | .arrow-l { |
| | left: 0; |
| | /*圆角矩形*/ |
| | /*border-radius: 15px;*/ |
| | /*右上角*/ |
| | border-top-right-radius: 15px; |
| | /*右下角*/ |
| | border-bottom-right-radius: 15px; |
| | } |
| | .arrow-r { |
| | right: 0; |
| | text-align: right; |
| | /*圆角矩形*/ |
| | /*border-radius: 15px;*/ |
| | /*border-radius: 左上角 右上角 右下角 左下角;*/ |
| | border-radius: 15px 0 0 15px; |
| | } |
| | .arrow-l:hover, |
| | .arrow-r:hover { |
| | background: rgba(0, 0, 0, .4); |
| | } |
| | .circle { |
| | position: absolute; |
| | left: 50%; |
| | margin-left: -35px; |
| | bottom: 15px; |
| | width: 70px; |
| | height: 13px; |
| | background: rgba(255, 255, 255, 0.3); |
| | border-radius: 7px; |
| | } |
| | .circle li { |
| | float: left; |
| | width: 8px; |
| | height: 8px; |
| | background-color: #fff; |
| | margin: 3px; |
| | border-radius: 50%; |
| | } |
| | /*current 当前的意思 此处一定要注意 优先级的问题*/ |
| | .circle .current { |
| | background-color: #ff5000; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="taobao"> |
| | <!-- 左按钮 --> |
| | <a href="[#](#)" class="arrow-l"> < </a> |
| | <!-- 右按钮 --> |
| | <a href="[#](#)" class="arrow-r"> > </a> |
| | <!-- 图片 --> |
| | <img src="[images/taobao.jpg](images/taobao.jpg)" alt=""> |
| | <!-- 小圆点 --> |
| | <ul class="circle"> |
| | <li></li> |
| | <li class="current"></li> |
| | <li></li> |
| | <li></li> |
| | <li></li> |
| | </ul> |
| | </div> |
| | </body> |
| | </html> |
网友评论