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

CSS 相对定位与绝对定位

2017-10-21 20:54 183 查看

参考：CSS

1）相对定位

2）绝对定位

3）固定定位

4）重叠元素的堆叠顺序设置

使用相对定位与绝对等功能可以对页面元素进行更灵活的定位！

1.相对定位

position:relative;

left:;

right:;

top:;

bottom:;

为元素设置相对定位之后，元素依然会占据原来的空间，依然在标准流中！

2.绝对定位

position:absolute;

left:;

right:;

top:;

bottom:;

为元素设置绝对定位之后，元素不会占据原来的空间，脱离了原来的队伍！

3.固定定位

position:fixed;

left:;

right:;

top:;

bottom:;

相对于浏览器的窗口进行定位

4.重叠元素的堆叠顺序设置

使用 z-index:;对设置了相对或绝对或固定定位的元素进行堆叠顺序的设置，设置的数值越

大即堆叠在越上层，该属性可以是负值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>第四章 用CSS给网页装潢[7] -相对定位与绝对定位</title>
<style type="text/css">
body {
height:2000px;
}
#div1 {
width:100px;
height:
4000
100px;
background:#FFCC00;
position:absolute;
left:30px;
top:10px;
z-index:1;
/*
position:relative;
相对于原来的位置进行定位（偏移）
left与right也只能用一个
top与bottom也只能用一个

position:relative;
left:20px;
right:20px;
top:30px;
*/
}
#div2 {
width:100px;
height:100px;
background:#6633FF;
position:absolute;
top:10px;
z-index:-2;

/*
position:absolute;
left:20px;
top:10px;
*/
}
#div3 {
width:100px;
height:100px;
background:#66FFCC;

/*
position:fixed;
固定定位ie6不能实现，不兼容

*/
left:20px;
top:10px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<!--
<div id="div3">div3</div>
->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航