css定位
在css中，定位是一个比较让人头疼的东西，有时候知道这个知识点，却不晓得如何去运用定位的知识
定位与浮动
css中浮动与定位有着比较类似的功能（float），当一个元素浮动的时候，其本身所处的盒子并不会占用页面的位置，其下方的盒子就会浮动到浮动盒子的下方，占用浮动盒子的位置，HTML和css布置页面的根本 在于各种盒子的布局。浮动 像一个航班，有固定路线，
定位像UFO，随意出现在在页面的角落
元素定位（定位模式）
在css中，position属性用于定义元素的定位模式，基本语法格式为：
选择器{position：属性值}
1 静态定位（static）
在静态定位中，我们在页面布局中的所有的css样式都可以说是运用了默认静态样式。
其独特的用法在于可以取消其他定位的布局，恢复默认布局
2.relative（相对定位）
一： 相对定位：这里相对的是其自身盒子的左上角顶点；
例如 position:realtive;
top:20px;
left:50px;
这个表示的是这个盒子相对于自身偏移上部20px，向左偏移50px
这里除了用像素单位，还可以用百分比表示
二：盒子浮动的时候，并不占有位置，但是相对定位会占有偏移前的位置，
3.absolute（绝对定位）
一：绝对定位 是相对于上一个已经定位的元素，从最近的父元素开始直到浏览器边框
二：绝对定位并不会占有位置，就是说在这个方面和浮动有些类似，
4.fixed（固定定位）
相对于浏览器窗口定位，在一些电商页面中经常可以看到广告，例如即将来临的 11.11，淘宝京东就会有在版心之外的广告，并不会随着页面的滑动而产生变化
元素定位（边偏移）
例子讲解
在这里可以看到左右两边都会有箭头，每当点击的时候图片会随着变化，这是js的作用，这不在当前讨论的范围
只讨论布局：如何布置呢？（在使用定位布局的时候，通常是子绝父相）
这里箭头所处的位置也是一个盒子，很容易想到绝对定位，不占有位置，并且可以漂浮在任意位置，但是绝对定位是依托于父元素，就可以用一个父元素包括图片盒子和箭头盒子，箭头所用的绝对定位在这里就是相对于父元素的，然后使用偏移量{left:0;top:50%;margin-top:-50%;}
这里的外边距表示的是当偏移量top：50%；左上定点偏移了父元素盒子的一半，margin-top:-50%;这样子箭头盒子就会和父元素盒子中间保持一致。同理，右边也是一样。
图片中可见position：absolute；
定位模式转换
和浮动一样，元素添加了绝对定位和固定定位以后，元素模式也会发生转换，转换为inline-block，
值得注意的是：行内块的宽度和高度跟内容有关系
行内元素是没有高度和宽度的
2.在浮动中，最前面浮动的元素显示在最外面。但是在定位中，当元素层叠在一起时，如何控制呢？使用Z-INDEX可以控制显示的优先级，根据这个的值得大小，越大显示在外面，值没有单位
最后，上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>relative 关于定位</title>
<!-- 浮动 想一个航班，有固定路线， -->
<!-- 定位像UFO，随意出现在在页面的角落 -->
<!-- 四种定位方式，static静态定位，可以用来取消定位模式， -->
<style>
/*div{width: 300px;
height: 200px;
background-color: pink;
}
相对移动，每次移动都是以自己的左上角的基点进行移动,下部的盒子还是保留在原地
.top{
position: relative;
top:100px;
left: 100px;
}
.bottom{
background-color: purple;
}*/
/*绝对定位开始*/
div{width: 200px;
height: 200px;
background-color: pink;
}
.top{
position: absolute;
/*绝对定位不占有位置，下部的盒子会上升到原来盒子的位置*/
/*以当前屏幕的基准点对准，浏览器当前屏幕，父类元素没有定位，和父类元素没有关系，在这和float不一样，
父类元素有定位，根据最近的父类的有定位的为基准点*/
}
.bottom{
background-color: purple;
width: 220px;
}
</style>
</head>
<body>
<!-- <div class="top"></div>
<div class="bottom"></div> -->
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
代码二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顺丰1.0</title>
<style>
.sf{
width: 100%;
height: 740px;
position: relative;
}
img{
display: block;
width: 100%;
}
.nav{
width: 100%;
height: 100px;
background-color: #dc1e32;
position: absolute;
}
.nav ul{
width:1280px;
margin: 0 auto;
height: 100%;
}
.nav ul li{
list-style-type: none;
float: left;
width: 210px;
height: 100%;
text-align: center;
line-height: 100px;
}
.nav ul li a{
text-decoration: none;
display: block;
}
.nav ul li:hover{
color:#451111;
background-color: white;
}
</style>
</head>
<body>
<div class="sf">
<a href="#">
<img src="../../案例/案例er/顺丰0.jpg" alt="">
<div class="nav">
<ul>
<li><a href="#">运单追踪</a></li>
<li><a href="#">我要寄件</a></li>
<li><a href="#">运费时效查询</a></li>
<li><a href="#">服务网点查询</a></li>
<li><a href="#">收集范围查询</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</div>
</a>
</div>
</body>
</html>
代码三——下拉菜单栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
</head>
<style>
/*添加视觉样式*/
/*字体大小，也可以设置字体样式*/
.multi_drop_menu.vertical{
font:1em;
}
/*设置标签样式a的，将a标签转换为块元素，添加内边距，会撑开盒子模型*/
.multi_drop_menu.vertical a{
display: block;
color: #555;
text-decoration: none;
background-color: #eee;
padding: .2em 1em;
border-width: 3px;
border-color: transparent;
}
/*当鼠标悬停的时候产生的动画，*/
.multi_drop_menu.vertical a:hover{
color: #fff;
background-color: #aaa;
}
/*当鼠标点击还没有松开的时候显示的*/
.multi_drop_menu.vertical a:active{
background-color: #fff;
color: #ccc;
}
/*添加功能样式，去校内外边距，将ul浮动，*/
.multi_drop_menu.vertical *{margin: 0;padding: 0;}
.multi_drop_menu.vertical ul{
/*float: left;*/
}
/*定位相对位置，li标签向上浮动*/
.multi_drop_menu.vertical li{
list-style-type: none;
float: left;
position: relative;
}
/*链接填满列表项，，背景只出现在内边距后面，去掉下划线*/
.multi_drop_menu.vertical li a{
display: block;
border-right: solid;
background-clip: padding-box;
text-decoration: none;
}
.multi_drop_menu.vertical li:last-child a{border-right-style: none;}
/*添加二级菜单的视觉样式，隐藏低级菜单*/
.multi_drop_menu.vertical li ul{display: none;}
.multi_drop_menu.vertical li ul{width: 9em;}
.multi_drop_menu.vertical li ul a{
border-right-style: none;
border-top-style: yellow solid;
}
/*添加二级菜单的功能样式*/
.multi_drop_menu.vertical li ul{
display: block;
position: absolute;
left: 0;
top: 100%;
}
.multi_drop_menu.vertical li li{
float: none;}
/*}隐藏三级菜单*/
.multi_drop_menu.vertical li li ul{
display: none;
}
.multi_drop_menu.vertical li ul{display: none;}
.multi_drop_menu.vertical li:hover> ul {
display: block;
}
/*三级菜单定位*/
.multi_drop_menu.vertical li li ul{
position: absolute;
left: 100%;
top: 0;
}
</style>
<body>
<nav class="multi_drop_menu vertical"> <!-- 一级开始-->
<ul>
<li><a href="#">Power</a></li>
<li><a href="#">Money</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Fame</a> <!-- 二级开始-->
<ul>
<li><a href="#">Sports Star</a></li>
<li><a href="#">Movie Star</a></li>
<li><a href="#">Rock Star</a><!-- 三级开始--> <ul>
<li><a href="#">Bruce Springsteen</a></li>
<li><a href="#">Bono</a></li>
<li><a href="#">Mick Jagger</a></li>
<li><a href="#">Bob Dylan</a></li>
</ul> <!-- 三级结束-->
</li>
<li><a href="#">Web Designer</a></li>
</ul><!-- 二级结束-->
</li>
</ul><!-- 一级结束-->
</nav>
</body>
</html>
finally
新手小白上路，多多指教
不怕慢，就怕停
每天进步一点点
学习资源已经上传
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
