目录
1、静态
<style>
/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
.box {
/* 静态定位, 默认值, 标准流 */
position: static;
left: 100px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>2、相对
如果left和right都有, 以left为准; top和bottom都有以top 为准
1、占有原来的位置
2、仍然具有标签原有的显示模式特点
3、改变位置参照自己原来的位置
<style>
.box {
position: relative;
right: 200px;
bottom: 400px;
left: 100px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>3、绝对
先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
1. 脱标, 不占位
2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)
<style>
.box {
position: absolute;
/* left: 50px; */
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
4、绝对-父级定位
父级相对定位; 子级绝对定位 -- 子绝父相
绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位
<style>
.father {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
}
.son {
width: 300px;
height: 300px;
background-color: skyblue;
}
.sun {
position: absolute;
right: 20px;
bottom: 50px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>5、绝对定位居中
1. 绝对定位的盒子不能使用左右margin auto居中
<style>
.box {
/* 1. 绝对定位的盒子不能使用左右margin auto居中 */
position: absolute;
/* margin: 0 auto; */
/* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动: 自己宽度的一半 */
/* margin-left: -150px; */
top: 50%;
/* margin-top: -150px; */
/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>/* 位移: 自己宽度高度的一半 */
transform: translate(-50%, -50%);
案例（定位小图）
<div class="content clearfix">
<ul>
<li>
<a href="#">
<img src="./images/course07.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> • 1125人在学习</p>
<!-- 定位的hot小图 -->
<img src="./images/hot.png" alt="" class="hot">
</a>
</li>
</ul>
</div>/* 课程模块 hot 定位小图 */
.box .content li {
position: relative;
}
.box .content li .hot {
position: absolute;
right: -4px;
top: 4px;
}
案例-二维码
不占位：绝对定位
它的父亲没有定位 就会找浏览器窗口
所以应该子绝父相
<style>
ul li .app {
position: relative;
}
.code {
position: absolute;
left: 50%;
/*会在中间偏右的位置*/
top: 41px;
display: none;
transform: translate(-50%);
/*往左移*/
}
/* 鼠标悬停a 显示二维码图片 */
.nav li a:hover img {
display: block;
}
</style><body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
<li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>
<li class="last"><a href="#">个人中心</a></li>
</ul>
</div>
</body>案例-banner定位
绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0
<style>
.banner {
position: relative;
margin: 0 auto;
width: 1226px;
height: 600px;
}
.mask {
position: absolute;
left: 0;
bottom: 0;
/* 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 */
/* width: 1226px; */
/* 如果子级和父级的宽度相同 */
width: 100%;
height: 150px;
background-color: rgba(0,0,0, .5);
}
</style>
</head>
<body>
<div class="banner">
<img src="./images/bg.jpg" alt="">
<!-- 遮罩 -->
<div class="mask">111</div>
</div>
</body>
</html>6、定位-固定
相对于浏览区进行定位移动
1. 脱标-不占位置
2. 改变位置参考浏览器窗口
3. 具备行内块特点（和绝对定位一样）要设置尺寸width height 或者保证有内容 不然盒子看不见
<style>
/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
.box {
position: fixed;
left: 0;
top: 0;
/*
1. 脱标-不占位置
2. 改变位置参考浏览器窗口
3. 具备行内块特点
*/
width: 200px;
height: 200px;
background-color: pink;
}
</style>7、元素的层级关系
1、不同布局方式元素的层级关系
标准流<浮动<定位
2、不同定位之间的层级关系:
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
3、默认情况下, 定位的盒子 后来者居上 ,
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
注意: z-index必须配合定位才生效
<style>
div {
width: 200px;
height: 200px;
}
.one {
position: absolute;
left: 20px;
top: 50px;
z-index: 1;
background-color: pink;
}
.two {
position: absolute;
left: 50px;
top: 100px;
background-color: skyblue;
}
/*
默认情况下, 定位的盒子 后来者居上 ,
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
注意: z-index必须配合定位才生效
*/
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
