html学习之路(一)深入理解css中position属性
2018-04-20 本文已影响58人
胡小羊
position属性之：static定位
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
html代码
<div class="wrap">
<div class="content">
</div>
</div>
css代码
.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}
效果图如下
fixed定位
结论：右下角的div永远不会动，就像经常弹出来的广告
position属性之:relative定位
相对定位元素的定位是相对它自己的正常位置的定位。
结论：即使相对元素的内容移动了，但是预留空间的元素仍然保存在正常流动，也就是说相对移动之后，不会对下面的其他元素造成影响
position属性之:absolute定位
绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
例①
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
效果
结论：只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。
例②
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{position: relative; width: 100px;height: 100px;background: #aaa; }
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
# 相较于上一个例子，我只修改了class为son的元素的css，设置为position：relative；
效果图
我们发现现在span的位置是相对于设有position属性的class为son的父元素的。
例③
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{background:green;}
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
#这个例子我只是修改了第一个例子中的css--设置了position:absolute；效果如下：
效果图
我们发现，现在span的定位是相对于具有position:absolute的属性的class为parent的父元素。
例④
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{background:green;}
.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
相对于例1，我添加了fixed的position属性，发现结果和例3是一模一样的。
例⑤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body{background:green;}
.parent{position:static; width: 300px;height: 300px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
</head>
<body>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
</body>
</html>
相对于例1，我添加了static的position属性（即html的默认属性），结果和例1是一样的。
综上所述，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。
