定位
1. 引入：
- 浮动可以让多个块级盒子一行没有缝隙排列实现，经常用于横向排列盒子
- 定位则是让盒子自由的在某个盒子里移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子
2. 定位的组成
定位也是在摆放盒子，按定位的方式移动盒子
定位=定位模式+边偏移
- 定位模式：position属性
用于指定一个元素在文档中的定位方式
position：static 静态定位
position: relative 相对定位
position: absolute 绝对定位
position : fixed 固定定位 - 边偏移： （以像素为单位，可以取正负值）
用于指定一个元素在文档中的最终位置
top: 顶端偏移量 定义元素相对于其父元素上边线的距离
bottom: 地端偏移量 定义元素相对于其父元素下边线的距离
left: 左端偏移量 定义元素相对于其父元素左边线的距离
right: 右端偏移量 定义元素相对于其父元素右边线的距离
position：static 静态定位 （了解）
是默认的定位方式，就是无定位的意思
它是按照标准流特性来摆盒子，没有边偏移
position: relative 相对定位
- 它是相对于自己原来的位置来移动的
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式待他原来的位置（不脱标，继续保留原来的位置）
<style>
.one {
width: 400px;
height: 400px;
background-color: burlywood;
position: relative;
left: 100px;
}
.two {
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
<body>
<div class="one">
</div>
<div class="two"></div>
</body>
position: absolute 绝对定位
1 . 它是相对于它的祖先元素来说的
2.** 若没有祖先元素或祖先元素没有定位，则以浏览器为准来定位**
3.若祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先元素为参考来移动位置
4. 不再占有原先的位置（脱标）
子绝父相（子级用绝对定位，父级用相对定位）
子级用绝对定位，不会占有位置，可以放到父级盒子里的任何一个地方
父盒子加定位来限制子盒子在父盒子中显示
父盒子布局时，需要占有位置，则父级用相对定位
相对定位经常用来做绝对定位的父级
position : fixed 固定定位
- 以浏览器的可视窗口为参照来移动元素， 就可以实现在浏览器页面滚动时元素的位置不会改变
- 不再占有原先的位置
<style>
.one {
width: 400px;
height: 400px;
background-color: burlywood;
position: fixed;
left: 400px;
}
.two {
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
<body>
<div class="one">
</div>
<div class="two"></div>
- 想要固定在版心的右侧位置：
先让固定定位的盒子left：50% 走到浏览器可视区（又称版心）的一半位置
在让固定定位的盒子 margin-left:版心宽度的一半距离
就可以让固定定位的盒子贴着版心的右侧对齐了
<style>
.one {
width: 400px;
height: 400px;
background-color: burlywood;
margin: 0 auto;
/* 盒子水平居中对齐 */
}
.two {
width: 100px;
height: 100px;
background-color: chartreuse;
position:fixed;
/* 先让固定定位的盒子left：50% ,走浏览器宽度的一半*/
left:50%;
/* 让固定定位的盒子 margin-left:版心宽度的一半距离 */
margin-left:200px;
}
</style>
<body>
<div class="two">想要固定在版心的右侧位置的盒子</div>
<div class="one">版心盒子</div>
<!-- 要注意两个盒子的上下的顺序 -->
粘性定位（了解还是不看了） position: sticky
- 以浏览器的可视窗口为参照来移动元素（固定定位的特点）
- 占有原先的位置（相对定位特点）
- 必须添加top botttom right left其中一个偏移才有效
定位叠放次序 z-indenx
在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用 z-indenx来控制盒子的前后次序
属性值是正负整数和0，默认是auto 是相当于0的，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来者居上
<style>
.box{
width: 200px;
height: 200px;
position:absolute;
left:0;
top: 0;
}
.one{
background-color: crimson;
}
.two{
background-color: darkgreen;
left: 50px;
top: 50px;
z-index: 2;
}
.three{
background-color: gold;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<div class="box one">红盒子</div>
<div class="box two">绿盒子</div>
<div class="box three">黄盒子</div>
此时，从上依次是，绿，黄，红盒子
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin: 0 auto; 来实现水平居中，
但可以通过下方计算方法实现盒子水平居中：
- left:50%; 父容器宽度的一半
- margin-left: 负值（往左边走自己盒子宽度的一半）,
实现盒子垂直居中： - top:50%;
- margin-top: 负值（往上走自己盒子宽度的一半）
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
background-color: crimson;
left:50%;
margin-left: -100px;
/* 绝对定位的盒子水平居中 */
}
.box1{
width: 200px;
height: 200px;
position: absolute;
background-color: greenyellow;
top:50%;
margin-top: -100px;
/* 绝对定位的盒子垂直居中 */
}
</style>
</head>
<body>
<div class="box">红盒子</div>
<div class="box1"></div>
</body>
定位的特殊性
绝对定位和固定定位也和浮动类似：（行内块）
- 行内元素添加了绝对定位和固定定位，就可以直接设置高度和宽度
- 块级元素添加了绝对定位和固定定位，不给宽度或高度，默认大小是内容的大小
浮动的元素会压住下面标准流的盒子，但不会压住下面标准流的盒子里面的文字；但绝对定位或固定定位会下面标准流的盒子的内容
因为浮动最初的目的就是：做文字环绕效果的，文字会围绕浮动元素
淘宝图的实战
<!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;
}
/* 1. 准备一个父级大盒子，是标准流，水平居中，
先往里面放一张图片,占据整个大盒子做背景图片 */
.tb{
width: 520px;
height: 280px;
background-color: hotpink;
margin: 100px auto;
position: relative;
/* 相对定位不脱离标准流，还是可以用margin来实现水平居中，但绝对定位和固定定位必须有固定的算法来实现 */
}
/* 2. 左右两个按钮，用x虚拟链接就可以。按钮还有大小
,超链接a是行内元素，先转为行内块元素，
但又压在图片上，用绝对定位，（相对定位会占有位置，固定定位又以浏览器为主，所以绝对定位）
加了绝对定位的盒子直接可以设高和宽
最后，想让子盒子在父盒子中定位，要子绝父相 在tb中添加 position: relative;*/
.zuo{
/* 发现 左右两个按钮又是垂直居中，对于绝对定位，使用算法实现top:50%;
margin-top: -15px; */
position: absolute;
left:0;
/* 区分左右的关键 */
top:50%;
margin-top: -15px;
width: 20px;
height: 30px;
/* 半透明背景 */
background-color: rgba(0,0,0,0.3 );
/* 把行内块中的文字（就是超链接）的颜色改为白色，垂直居中， */
text-align: center;
line-height: 30px;
text-decoration: none;
color: snow;
/* 两个矩形圆角 */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.you{
position: absolute;
right:0;
top:50%;
margin-top: -15px;
width: 20px;
height: 30px;
/* 半透明背景 */
background-color: rgba(0,0,0,0.3 );
/* 把行内块中的文字（就是超链接）的颜色改为白色，垂直居中， */
text-align: center;
line-height: 30px;
text-decoration: none;
color: snow;
/* 两个矩形圆角 */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
/* 左右就两部分不同，所以相同部分提取，用并集选择器设置相同的样式 */
/* .zuo,.you{
position: absolute;
top:50%;
margin-top: -15px;
width: 20px;
height: 30px；
background-color: rgba(0,0,0,0.3 )
text-align: center;
line-height: 30px;
text-decoration: none;
color: snow;
*/
/* 3.在整个大图片下方有一个小圆点模块：首先构建一个盒子，此盒子要绝对定位，因为要水平居中，使用算法实现，同时是白色半透明 */
.nav{
position: absolute;
bottom:15px;
left:50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255,255,255,0.3);
border-radius:7px;
}
/* 矩形圆角框 */
/* 里面的小圆点,首先取消默认的小时新的黑点 */
li {
list-style: none;
}
.nav li {
width: 8px;
height: 8px;
background-color: #fff;
/* 此时，是四个小矩形竖着排列，要想横向排列，就要浮动起来四个li 盒子，矩形改为圆形 */
float:left;
border-radius: 50%;
/* 之后是四个小圆之间隔开，使用外边距 */
margin:3px;
}
/* 4.当前的一个小圆点改变颜色 ,不要忘记选择器权重的问题，不可以直接用 .last 此时权重是0010 而 .nav li 是0010+0001=0011*/
.nav .last{
background-color: tomato;
}
</style>
</head>
<body>
<div class="tb">
<img src="imagine/tb.jpg">
<!-- 左侧按钮 -->
<a href="#" class="zuo"><</a>
<!-- 右侧按钮 -->
<a href="#" class="you">></a>
<!-- 小圆点 -->
<ul class="nav">
<li></li>
<li></li>
<li class="last"></li>
<li></li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号