您的位置：首页 > Web前端 > CSS

CSS-Position

2016-05-15 18:53 585 查看
Position顾名思义就是定义位置，常用的有四种

static
fixed
relative
absolute


我们常用的就是static属性的position，即默认的位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static</title>
</head>
<body>
<div style="width: 100px;height: 100px;border: 10px solid red"></div>
<div style="width: 100px;height: 100px;border: 10px solid blue"></div>
</body>
</html>




div默认在自己的位置，也就是我们一般看到的位置。

其次是fixed属性，这个属性是指无论如何滚动浏览器，div都会在固定在当前页面可视区的设定位置。即相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static</title>
<style type="text/css">
div#gson{
position: fixed;
width: 100px;
height: 100px;
border: 10px solid red;
}
div#hson{
position: fixed;
width: 200px;
height: 200px;
border: 10px solid blue;
}
div#father{
width: 1000px;
height: 2000px;
border: 10px solid yellow;
background-image:-webkit-linear-gradient(bottom, orange, green);
background-image:-o-linear-gradient(bottom, orange, green);
background-image:linear-gradient(to top, orange, green);
}
</style>
</head>
<body>
<div id="gson"></div>
<div id="hson"></div>
<div id="father"></div>
</body>
</html>


当滑动时position定义为fixed的div不会滚动



最后是relative和absolute这两个比较有意思。relative是相对于正常位置，absolute相对于 static 定位以外的第一个父元素进行定位。通过left right bottom top来设定位置。先来说relative

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static</title>
<style type="text/css">
div#gson{
position: relative;
width: 100px;
height: 100px;
border: 10px solid red;
left: 0px;
right: 0px;
}
div#hson{
position: relative;
width: 200px;
height: 200px;
border: 10px solid blue;
left: 0px;
right: 0px;
}
div#father{
width: 500px;
height: 500px;
border: 10px solid yellow;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="father">
<div id="gson"></div>
<div id="hson"></div>
</div>
</body>
</html>




我们发现gson和hson定义的位置完全一样，但是出现的位置却是和一般的div出现的一样，即div独占一行。两个子div没有相互占用地方。修改一下left和top属性来更改位置

div#gson{
position: relative;
width: 100px;
height: 100px;
border: 10px solid red;
left: 50px;
top: 50px;
}




这里修改了gson的位置，但是hson的位置没有变，说明这两个div并不是普通的div，如果是普通的div，蓝色hson的div也会向下移动，此时再更改hson的位置

div#hson{
position: relative;
width: 200px;
height: 200px;
border: 10px solid blue;
left: 50px;
top: 0px;
}




发现hson向右偏移，这没有什么可说的，接着修改hson的top属性

div#hson{
position: relative;
width: 200px;
height: 200px;
border: 10px solid blue;
left: 50px;
top: 50px;
}




即相对于原来的hson的位置偏移了top和left的值。

所以，如果div定义为relative，那么他的偏移是相当于原来位置的。

接着说absolute属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static</title>
<style type="text/css">
div#gson{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid red;
left: 50px;
top: 50px;
}
div#hson{
position: relative;
width: 200px;
height: 200px;
border: 10px solid blue;
left: 50px;
top: 50px;
}
div#father{
width: 500px;
height: 500px;
border: 10px solid yellow;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="father">
<div id="gson"></div>
<div id="hson"></div>
</div>
</body>
</html>




发现gson跳出了父div，而且是相对于body来偏移的，这就是绝对偏移。那什么叫做出static以外的第一个父元素呢？比如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static</title>
<style type="text/css">
div#gson{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid red;
left: 50px;
top: 50px;
}
div#hson{
position: relative;
width: 200px;
height: 200px;
border: 10px solid blue;
left: 50px;
top: 50px;
}
div#father{
width: 500px;
height: 500px;
border: 10px solid yellow;
margin-left: 100px;
margin-top: 100px;
}
div#grandfather{
position: absolute;
width: 1000px;
height: 1000px;
border: 10px solid green;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="gson"></div>
<div id="hson"></div>
</div>
</div>

</body>
</html>


上面添加了一个父div元素，如果位置是static我们发现红色gson还是根据body来定位的，将grandfather的position改为static之外的属性，我们发现红色的gson此时是根据grandfather来定位的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航