开启定位会使我们的元素移动，这样可以控制Web浏览器如何以及在何处显示特定的元素。
如何使用呢？
可以使用position属性把一个元素放置到网 页中的任何位置。
- 可选值：
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于其正常位置进行定位。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
相对定位
相对定位也就是相对当前的位置进行移动了。开启相对定位不会使元素脱离文档流。
- top、right、bottom、left四个属性对元素进行定位
首先得开启，position relative，然后再进行设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启相对定位的元素，虽然不在原来的位置，但是位置依然保留*/
/*相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素*/
position: relative;
left: 100px;
top:200px;
}
.box3{
width: 300px;
height: 200px;
background-color: green;
}
span{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
/*开启相对定位不会改变属性，对于内联元素来说
也不会改变设置的宽高*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>我是一个span元素</span>
</body>
</html>
相对定位的特点
- 如果不设置元素的偏移量，元素位置不会发生改变
- 也不会改变其属性。
- 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
- 相对定位不会改变元素原来的特性。
- 相对定位会使元素的层级提升，使元素可以覆盖文 本流中的元素。
绝对定位
开启绝对定位时，它的将会相对于html元素（页面的顶端，但是不涉及默认设置）或离他最近的祖先定位元素进行定位。
当将position属性设置为absolute时，则开启 了元素的绝对定位。
- 当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
/*开启绝对定位，会使原来的元素脱离文档流*/
position: absolute;
left:0;
top: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
position: relative;
}
.s1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box4">
<div class="box2"></div>
</div>
<div class="box3"></div>
<span class="s1"></span>
</body>
</html>
绝对定位的特点
- 绝对定位会使元素完全脱离文本流。
- 绝对定位的块元素的宽度会被其内容撑开。
- 绝对定位会使行内元素变成块元素，改变其性质
- 一般使用绝对定位时会同时为其父元素指定一 个相对定位，以确保元素可以相对于父元素进行定位。即让开启绝对定位的元素，还是以其父元素为基准，否则会基于浏览器左上角定位(而且不基于浏览器的默认设置)
固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
就像网页中那些广告或者二维码一样，屏幕虽然滚动但是它们不会移动
开启固定定位：将position属性设置为fixed时，则开启了元素的 固定定位。
- 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
/*开启绝对定位，会使原来的元素脱离文档流*/
/*position: absolute;*/
position: fixed;
left: 500px;
top: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
}
.box4{
width: 300px;
height: 300px;
background-color: orange;
}
.s1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box4">
<div class="box2"></div>
</div>
<div class="box3"></div>
<span class="s1">我是span元素</span>
</body>
</html>
开启固定定位后的一些特性和开启绝对定位有些相似。但是ie浏览器不支持这样的开启。
层级 z-index和背景透明度
我们在说到css之处时，讲到CSS是指层叠样式表 (Cascading Style Sheets)。所谓的层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖乘次低的，而css就可以分别为网页的各个层次设置样式。
那么当我们开启定位之后就可以设置层级了，如果没有开启定位，层级是无法开启的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的层级</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
top: 100px;
left: 100px;
/*
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
*/
z-index: 25;
opacity: 0.5;
filter: alpha(opacity=50);
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 30;
/*
设置元素的透明背景
opacity可以用来设置元素背景的透明，它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
*/
opacity: 0.5;
/*
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试
*/
filter: alpha(opacity=50);
}
.box4{
width: 200px;
height: 200px;
background-color: orange;
/*开启相对定位*/
position: relative;
/*父元素的层级再高，也不会盖住子元素*/
z-index: 20;
top: 500px;
}
.box5{
width: 100px;
height: 100px;
background-color: skyblue;
/*开启绝对定位*/
position: absolute;
z-index: 10;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
</body>
</html>
有任何问题请给我留言，或者直接发我邮箱taijirenlijunyang163@.com。欢迎大家交流讨论。
网友评论