1.相对定位
<style>
div{
width: 300px;
height: 300px;
background: red;
}
.box1{
background: cyan;
/* 1.相对定位 */
position: relative;
/* 与定位配套使用的有坐标 两点确定一个位置
水瓶坐标（left/right） 垂直坐标（top/bottom） */
/* left: 110px;
top: 200px; */
right: 100px;
bottom:200px ;
}
/* 相对定位在文档流占位置 它是根据初始位置（来当作参照物）
注意 几乎从来不单独使用相对定位 都是配合绝对定位使用 */
</style>
</head>
<body>
<div class="box1">定位position</div>
<div class="box2">定位position</div>
</body>
</html>
<!-- 定位一般用于一层上面叠加另一层 -->
2.绝对定位
<style>
.big{
width: 600px;
height: 600px;
background: pink;
/* 相对定位 */
position: absolute;
}
.son1{
width: 100px;
height: 100px;
background: red;
/* 设置绝对定位 */
position: absolute;
/* 绝对定位一定要结合定位坐标使用 水平坐标（left/right） 垂直坐标（top/bottom）*/
/* left: 0;
top: 0; */
right: 0;
bottom: 0;
/* 对于当前页面浏览器而言定位 */
}
.son2{
width: 150px;
height: 120px;
background: palegreen;
}
/* 绝对定位在文档流不占位置 根据有定位属性父元素定位 如果向上查找没有 祖元素一直没有定位 最后才根据浏览器定位 */
</style>
</head>
<body>
<div class="big">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
3.蒙层
<style>
.big{
width: 400px;
height: 400px;
background: pink;
border: 5px dotted deeppink;
/* 有宽高的div 水平居中 */
margin: 100px auto;/* 上下100 */
position: relative;/* 设置相对定位不用写坐标 */
}
img{
width: 100%;/* 代表图片大小和父元素一致 也就是big */
height: 100%;
}
.mark{/* 这个梦层和图片一样大 */
width: 400px;
height: 400px;
background: rgba(0,0,0,0.9);
/* rgba(颜色值,颜色值,颜色值,透明度) 颜色值1-255 透明度0-1 */
/* 想要梦层盖住图片 一层上面叠加另一层 绝对定位 */
position: absolute;/* 设置绝对定位 必须写坐标 */
left: 0;
top: 0;
/* 过渡时间 */
transition: 3s;
}
/* 鼠标滑过big 梦层透明度为0 也是消失的一种 之前的消失有dispaly：none（没有过渡时间） */
.big:hover .mark{/* 鼠标滑过为黑色 */
background: rgba(0,0,0,0.0);
}
</style>
</head>
<body>
<div class="big">
<img src="./1.gif" alt="">
<div class="mark"></div>
</div>
</body>
4.绝对定位2
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
/* 父相子绝 */
position: relative;
}
img{
/* 设置和big一样大 */
width: 400px;/* 或者100% */
height: 400px;
/* 解决图片3px问题 */
vertical-align: top;
border: 0;
}
p{
background: rgba(255, 0, 160, 0.8);
/* 在一层叠加一层 */
position: absolute;
left: 0;
bottom: 0;
/* 设置单行文本省略号 */
width: 100%;
white-space:normal;/* 让文字在一行显示 */
overflow: hidden;/* 溢出隐藏 */
text-overflow: ellipsis;/* 后面隐藏的变成省略号 */
}
span{
background: #f90;
}
</style>
</head>
<body>
<div class="big">
<img src="./1.gif" alt="">
<p><span>10号</span> 今天是周一 再过两周就能过年了</p>
</div>
</body>
5.绝对定位3（二级导航栏）
1）html部分
<link rel="stylesheet" href="../css/nav.css">
</head>
<body>
<!-- 头部 外围有颜色 外围➕版心 -->
<div id="headerWrapper">
<div id="header">
<a href="javascript:;">首页</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">他有二级菜单</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">四个文字</a>
<a href="javascript:;">四个文字 <a>
<a href="javascript:;">四个文字</a>
</div>
</div>
<!-- 大图部分 -->
<div id="banner">
<img src="./2.jpg" alt="">
</div>
</body>
2）css部分
*{
margin: 0;
padding: 0;
}
#headerWrapper{
background: #f90;
}
#header{
width: 1200px;
height: 100px;
margin: 0 auto;
line-height: 100px;/* 单行文本垂直居中 */
}
#header a{
color: #fff;
text-decoration: none;/* 去除超链接下划线 */
padding: 0 30px;
/* 超链接设置浮动 */
float: left;
}
#header a:hover{
background: #333;
}
#banner{
height: 460px;
position: relative;
overflow: hidden;
}
#banner img{
position: absolute;
top: 0;
left: 50%;
margin-left: -960px;
}
6.banner大图思路
<style>
.big{
width: 700px;
height: 600px;
background:salmon ;
/* 父相子绝 */
position: relative;/* 相对定位 */
}
.son{
width: 200px;
height: 300px;
background: seagreen;
/* 想要水平居中 用绝对定位来做 */
position: absolute;/* 绝对定位 */
left: 50%;top:0;
margin-left: -100px;/* margin-left：负宽度的一半 */
}
</style>
</head>
<body>
<div class="big">
<div class="son"></div>
</div>
</body>
7.banner大图的写法
<style>
*{
margin: 0;
padding: 0;
}
#banner{
/* width: 100%; *//* (1600px) 外围 只写100%*/
/* 设置高度就是图片的高度 */
height: 460px;
background: pink;
position: relative;/* 父相子绝 */
overflow: hidden;/* 溢出隐藏 */
}
#banner img{
/* 水平居中 利用绝对定位 */
position: absolute;
left: 50%;
top: 0;
/* 负宽度的一半 */
margin-left: -960px;
}
</style>
</head>
<body>
<div id="banner">
<img src="./2.jpg" alt="">
</div>
</body>
8.定位层叠性
<style>
.box1{
width: 300px;
height: 300px;
background: palegreen;
/* 设置绝对定位 */
position: absolute;
left: 0;
top: 0;
/* 定位层叠定 值越大 越在上方 默认值为auto */
/* z-index可以设置为负值 但是不用 去div的后面*/
z-index: 1;
}
.box2{
width: 250px;
height: 150px;
background: red;
/* 设置绝对定位 */
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>