前端基础-CSS定位
一、定位（重点）
定位的使用：
1.4种定位方式：静态、相对、绝对、固定
2.4种边偏移属性：left、right、top、bottom
注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）
1.静态定位
所有标准流都是静态定位
语法：position:static
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:static;/* 设置静态定位 */
top:20px;/* 设置边偏移 */
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>效果图 |
|---|
总结：
1.工作中用的比较少，因为加了静态定位，元素也是标准流
2.偏移值对静态定位无效
使用场景：通常是将已经设置过定位的元素还原成标准流
我们以后所说的定位不包含静态定位
2.相对定位
相对于自身在标准流的位置进行定位移动
语法：position：relative
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:relative;/* 设置相对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>效果图 |
|---|
总结：
1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置
2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在 肉体永驻）
3.可以盖在标准流的上方
使用场景：微调元素和配合绝对定位来实现效果
3.绝对定位
从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止
语法：position:absolute
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>效果图 |
|---|
总结：
1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html
2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间
3.margin:auto对于设置过绝对定位的元素不起作用
4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义
使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）
父相子绝
案例：
1.让盒子水平垂直居中（水平居中，垂直也居中）
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:50%;/* 设置上边偏移 */
margin-left:-50px;/* 往左边移动自身宽度的一般 */
left:50%;/* 设置做边偏移 */
margin-top:-50px;/* 往上面移动自身高度的一半 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>效果图 |
|---|
2.图片上加logo
效果图示 |
|---|
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:290px;
height:163px;
position:relative;/* 父元素设置相对定位 */
}
.logo{
width:52px;
height:36px;
background:url(2.png);
position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */
right:0;/* 最右边 */
top:0;/* 最上面 */
}
</style>
</head>
<body>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
</body>总结：父元素使用相对定位（不脱离标准流，写多个不会覆盖），子元素绝对定位（相对于父盒子的位置） —父相子绝
3.轮播图布局（以京东为例）
效果图示 |
|---|
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:590px;
height:470px;
margin:0 auto;
border:1px solid #000;
position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
ul li{
display:none;
}
ul li.on{
display:block;
}
ol{
width:152px;
height:18px;
position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */
left:46px;/* 左边偏移 */
bottom:20px;/* 下面偏移 */
}
ol li{
float:left;
width:10px;
height:10px;
border-radius:50%;
border:1px solid #fff;
margin:4px;
}
ol li.on{
width:4px;
height:4px;
border:4px #999 solid;
background:#fff;
}
.box>a{
text-decoration:none;
color:#fff;
background:#666;
width:24px;
height:40px;
display:block;
text-align:center;
line-height:40px;
position:absolute;/* 设置绝对定位，相对父元素进行偏移 */
top:50%;/* 上边偏移 */
margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */
}
.box>a.left{
left:0; /* 左按钮左边偏移为0，在最左边 */
}
.box>a.right{
right:0; /* 右按钮右边偏移为0，在最右边 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li>
<li><a href="###"><img src="img/banner2.jpg" /></a></li>
<li><a href="###"><img src="img/banner3.jpg" /></a></li>
</ul>
<ol>
<li class="on"></li>
<li></li>
<li></li>
</ol>
<a class="left" href="###"><</a>
<a class="right" href="###">></a>
</div>
</body>4.固定定位
以浏览器作为参考进行偏移，且滚动条对固定定位无效
语法：position:fixed
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:300px;
height:200px;
background:#abcdef;
position:fixed;/* 设置固定定位，相对于浏览器窗口 */
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}
.text{
width:20px;
}
</style>
</head>
<body>
<div class="text">
日照香炉生紫烟，遥看瀑布挂前川。
飞流直下三千尺，疑是银河落九天。
</div>
<div class="box"></div>
</body>效果图 |
|---|
总结：
1.会脱离文档流，不占据标准流的空间
2.不继承父元素的宽高，需要给自身定义宽高
3.margin:auto对固定定位的元素不起作用
4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效）
使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告
案例：
京东最右侧的小列表
案例效果图 |
|---|
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
.container{
height:2000px;
border-right:5px #7A6E6E solid;
}
ul{
list-style:none;
padding:0;
margin:0;
position:fixed;
right:5px;
top:50%;
margin-top:-95px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#"><img src="img/1.jpg" /></a></li>
<li><a href="#"><img src="img/2.jpg" /></a></li>
<li><a href="#"><img src="img/3.jpg" /></a></li>
<li><a href="#"><img src="img/4.jpg" /></a></li>
<li><a href="#"><img src="img/5.jpg" /></a></li>
</ul>
</div>
</body>四种定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动 |
绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位的父级移动位置 |
固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
5.定位元素的层叠效果
控制“定位”元素的叠放层级
语法：z-index:值
取值：
1.数字：
正数，数字越大，层级越高，离用户越近
负数，数字越小，层级越低，离用户越远
2.auto：（默认值）和父元素层级相同
3.正数比auto大，负数比auto小
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
.box{
width:100px;
height:100px;
background:#f00;
position:relative;
top:50px;
z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
}
.box1{
width:200px;
height:200px;
background:#0f0;
position:relative;
left:50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>效果图 |
|---|
总结：
1.z-index只针对定位元素有效果（但不包括静态定位）
2.z-index值越大，层级越高
3.如果父元素已经比较过层级了（父元素“都有”z-index的时候，并且值不为auto），那么子元素与子元素之间是不会再去比较的
出题：上大盒子压住下大盒子 ，下大盒子里面的子元素压住上盒子