5.1 元素的定位
Position：static | absolute | fixed | relative
Static: 默认值，元素按照自身默认的方位显示
Absolute: 绝对定位，以含有定位属性的父元素为基准
Fixed: 浏览器不支持改属性
Relative: 相对定义，元素以自身位置为基准，按照边偏移属性中定义的属性值显示
5.2 绝对定位
在页面中使用绝对定位的元素会从文档中独立的显示出来，所以使用绝对定位的元素可能会遮盖其他的页面元素
5.2.1 绝对定位与父元素
在使用绝对定位的时候，定位参照元素是包含定位属性的父元素，如果没有这样的父元素，则按照body元素位置确定显示位置
一个使用嵌套绝对定位元素的实例
<style type="text/css">
.main
{
position:absolute;
top:50px;
left:50px;
width:400px;
height:200px;
border:2px solid red;
}
.include
{
position:absolute;
left:50%;
top:50px;
border:2px solid green;
width:300px;
height:50px;}
</style>
</head>
<body>
<div style="text-indent: 21pt; margin: 0cm 0cm 0pt" ><div style="mso-bidi-font-weight: normal">这是父元素定位属性为position，自身属性也是position的实例</div></div>
效果
绝对定位与相邻元素
在使用绝对定位的时候绝对定位元素会独立显示，并不影响其他元素的显示位置（但可能会覆盖其他元素），也就是说与绝对定位元素相邻的元素会忽略绝对定位元素的存在
看例子
<style type="text/css">
.DIV1
{
background:red;
width:200px;
height:100px;
}
.absolute
{
position:absolute;
top:50px;
left:50px;
width:400px;
height:100px;
background:green}
.div2
{
background:yellow;
width:200px;
height:100px}
</style>
</head>
<body>
<div style="margin: 0cm 0cm 0pt" ><div style="margin: 0cm 0cm 0pt" ><div style="margin: 0cm 0cm 0pt" ></body>
</html>
绿色的是绝对定位的div
红色和黄色的仍然按原来的块元素自动换行排列
5.3 相对定位
相对定位是按照元素自身所在的位置，使用边偏移属性来重新定义元素的显示位置
看例子
<style type="text/css">
.div1
{
background:red;
width:200px;
height:100px;
}
.relative
{
position:relative;
top:50px;
left:50px;
width:400px;
height:100px;
background:green
}
.div2
{
background-color:yellow;
width:200px;
height:100px;
}
</style>
</head>
<body>
<div style="margin: 0cm 0cm 0pt" ><div style="mso-bidi-font-weight: normal">这是相对定位,相对定位占据原来的位置，但根据原来位置的左上角用偏移量进行定位</div>
<div style="margin: 0cm 0cm 0pt" ></body>
</html>
效果
扫一扫
6470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
