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
新手小白上路,多多指教
不怕慢,就怕停
每天进步一点点
学习资源已经上传