css的定位
CSS的定位属性有三种,分别是绝对定位,相对定位,固定定位
position: absolute; <!-- 绝对定位-->
position: relative; <!-- 相对定位-->
position:fixed; <!-- 固定定位 -->
相对定位
让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)
举例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{
margin: 0px;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
.div2{
position: relative;/*相对定位:相对于自己原来的位置*/
left: 50px;/*横坐标:正值表示向右偏移,负值表示向左偏移*/
top: 50px;/*纵坐标:正值表示向下偏移,负值表示向上偏移*/
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">有生之年</div>
<div class="div2">狭路相逢</div>
</body>
</html>
相对位置不脱标
相对定位的用途
(1)微调元素
(2)做绝对定位的参考,子绝父相
相对位置的定位值
- left: 盒子右移
- right:左移
- top:下移
- bottom:上移
斜上斜下就是组合起来
绝对定位
绝对定位:定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left,纵坐标用top或bottom表示
绝对定位脱标
绝对定位的盒子脱离了标准文档流。
所以,所有的标准文档流的性质,绝对定位之后就不遵守了
绝对定位之后,标签就不区分所谓的行内元素,块级元素了。不需要display:block就可以设置宽高了
绝对位置的参考点
(1)如果用top描述,那么参考点就是页面的左上角,而不是浏览器的左上角;
(2)如果右buottom描述,那么参考点就是浏览器首屏窗口尺寸,对应页面的左下角
以盒子为参考点
一个绝对定位的元素,如果父辈元素中也出现了已定位(无论是绝对定位,相对定位,还是固定定位)的元素,那么将以父辈这个元素为参考点
子绝父相
(1)要听最近已经定位的祖先元素,不一定是父亲,可能是爷爷
<div class="box1"> 相对定位
<div class="box2"> 没有定位
<p></p> 绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
</div>
</div>
(2)不一定是相对定位,任何定位,都可以作为儿子的参考点
子绝父绝,子绝父相,子绝父固都可以给儿子定位的。但是在工程上,如果子绝,父绝没有一个盒子在标准流里面了,所有页面就不稳固,没有任何实战用途
子绝父相:这样可以保证父亲没有脱标,儿子脱标在父亲的范围里面移动。
父亲浮动,设置相对定位(零偏移),然后让儿子绝对定位一定距离
(3)绝对定位的儿子,无视参考的那个盒子的padding
下图,绿色部分是父亲div的padding,蓝色部分p是div的内容区域。此时,如果div相对定位,p绝对定位。那么p将无视父亲的padidng,在border内侧为参考点,进行定位
让绝对定位中的盒子在父亲里居中
如果想让一个标准流中的盒子在父亲里居中(水平方向来看)可以将其设置
margin: 0 auto属性
可如果盒子是绝对定位,此时已经脱标了,如果还想让其居中(位于父亲的正中间),可以这样做o
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先,让左边线居中
top: 0;
margin-left: -300px; 然后,向左移动宽度(600px)的一半
}
总结公式:
left:50%; margin-left:负的宽度的一半;
固定定位
就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。
备注:IE6不兼容
用途1:网页右下角的“返回到顶部”
<style type="text/css">
.backtop{
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
background-color: gray;
text-align: center;
line-height:30px;
color:white;
text-decoration: none; /*去掉超链接的下划线*/
}
</style>
用途2:顶部导航条
需要注意的是,假设顶部导航条的高度是60px,那么,为了防止其他内容被导航条覆盖,我们需要给body标签设置60px的padding-top;
实现如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*为什么要写这个?*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位,所以这个padding没有什么用,就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<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>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
</ul>
</div>
</div>
</body>
</html>
z-index属性:
表示谁压着谁。数值大的压盖住数值小的。
以下特性
(1)属性值大的位于上层,属性值小的位于下层
(2)z-index值没有单位,就是一个正整数,默认z-index值是0;
(3)如果大家都没有z-index值,或者值相同。那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素能够压住没有定位的元素
(4)只要定位了的元素有z-index值。也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index值,而浮动的元素不能用
(5)从父现象:父亲怂,儿子再强也没有用。意思是,如果父亲1大于父亲2,即使儿子1小于儿子2,儿子1也能在最上层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0px;
}
div{
width: 100px;
height: 100px;
}
#div2{
position: absolute;
left:100px;
top:100px;
background-color: green;
}
#div1{
position: absolute;
left: 50px;
top:50px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
当好几个已定位的标签出现覆盖的现象时,我们可以用这个z-index属性决定,谁处于最上方,也就是层级的应用。
图片来着github大佬,详情链接在隔壁贴